Vue.js 如何在不添加历史记录的情况下推送到 vuerouter

发布于10月19日

我有以下顺序发生:

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

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

一旦他们的任务完成，他们会通过

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

问题是，他们通常希望从结果返回到主屏幕，但当他们单击"上一步"时，他们会再次被发送到加载，加载会将他们发送回结果，因此他们被困在一个无限循环中&amp；无法返回主屏幕.

有没有办法解决这个问题？我希望有一个理想的 Select ，比如:

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

这会让他们进入这条路由，而不会被载入历史.

推荐答案

There is a perfect way to handle this situation

您可以使用in-component guard在颗粒级别控制路由

在代码中进行以下更改

In main screen component

在组件选项中添加此beofreRouteLeave guard，在进入"结果屏幕"之前，您将只设置路由

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

In loading screen component

如果路由从结果返回到装载，则不应着陆

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

在加载屏幕中，beforeRouteEnter防护无法访问

In result screen component

如果您使用返回，则不应在装载时直接着陆

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

我刚刚创建了一个小型vue应用程序来重现同样的问题.根据你的问题，它在我当地有效.也希望是resolves your issue.

实用课程推荐