如何在不添加历史记录的情况下推送到 vue-router？

Question

我有以下顺序发生：

• 主屏幕

• 载入画面

• 结果屏幕

在主页上，当有人点击一个按钮时，我将他们发送到加载屏幕，通过：

this.$router.push({path: "/loading"});

一旦他们的任务完成，他们将通过以下方式发送到结果屏幕

this.$router.push({path: "/results/xxxx"});

问题是，通常他们想从结果返回到主屏幕，但是当他们点击返回时，他们又被发送到加载，这又将他们发送回结果，所以他们陷入了无限循环并且无法继续回到主屏幕。

任何想法如何解决这一问题？如果有这样的选项，我非常希望：

this.$router.push({path: "/loading", addToHistory: false});

这会将它们发送到路线而不将其添加到历史记录中。

原文由 Ali 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有一个完美的方法来处理这种情况

您可以使用 组件内保护 来控制颗粒级别的路由

在您的代码中进行以下更改

在主屏幕组件中

在组件选项中添加这个 beofreRouteLeave 守卫，在离开“结果屏幕”之前，您将路线设置为仅通过加载屏幕

beforeRouteLeave(to, from, next) {
   if (to.path == "/result") {
      next('/loading')
    }
    next();
  },

在加载屏幕组件中

如果路由从结果返回到加载，它不应该在这里降落并直接跳转到主屏幕。

 beforeRouteEnter(to, from, next) {
    if (from.path == "/result") {
      next('/main')
    }
     next();
  },

在加载屏幕中，beforeRouteEnter 守卫无法访问它，因为在确认导航之前调用了守卫，因此甚至还没有创建新的进入组件。因此，利用这一点，您 不会在从结果屏幕路由时触发无限呼叫

在结果屏幕组件中

如果你使用 go back 那么它不应该登陆加载并直接跳转到主屏幕

beforeRouteLeave(to, from, next) {
    if (to.path == "/loading") {
      next('/')
    }
    next();
  },

我刚刚创建了一个小的 vue 应用程序来重现同样的问题。根据您的问题，它在我的本地工作。希望它也能 解决您的问题。

原文由 chans 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这应该有一个真正的答案使用 this.$router.replace ：

 // On login page

// Use 'push' to go to the loading page.
// This will add the login page to the history stack.
this.$router.push({path: "/loading"});

// Wait for tasks to finish

// Use 'replace' to go to the results page.
// This will not add '/loading' to the history stack.
this.$router.replace({path: "/results/xxxx"});

为了进一步阅读，Vue 路由器在幕后使用 History.pushState() 和 History.replaceState() 。

原文由 nbwoodward 发布，翻译遵循 CC BY-SA 4.0 许可协议