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

我发生了以下顺序:

主屏幕

载入画面

结果屏幕

在主页上，当有人单击按钮时，我将其通过以下方式发送到加载屏幕:
this.$router.push({path: "/loading"});
任务完成后，将通过以下方式将其发送到结果屏幕
this.$router.push({path: "/results/xxxx"});
问题是，通常他们希望从结果返回主屏幕，但是当他们单击返回时，它们将被发送到再次加载，从而将它们发送回结果，因此它们陷入了无限循环并且无法前进返回主屏幕。

任何想法如何解决这一问题？理想情况下，我希望有一个类似的选择:
this.$router.push({path: "/loading", addToHistory: false});
这会将他们发送到该路线而不将其添加到历史记录中。

最佳答案

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

您可以使用in-component guard来控制颗粒级别的路线

在代码中进行以下更改

在主屏幕组件中

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

在加载屏幕组件

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

在结果屏幕组件中

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

我刚刚创建了一个小型Vue应用程序来重现相同的问题。根据您的问题，它在我的本地计算机上有效。希望它也能解决您的问题。

关于javascript - 如何在不添加历史的情况下推送到vue-router？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58201173/