如何解决vue中避免冗余导航到当前位置错误？

Question

我是 vue 的新手，在用户登录并重定向到另一条路线后出现错误。基本上我是一名 PHP 开发人员，我使用 laravel 和 vue。请帮我解决这个错误。

未捕获（承诺）错误：避免冗余导航到当前位置：“/admin”。

这里也是截图

Vue 代码

 methods: {
        loginUser() {
            var data = {
                email: this.userData.email,
                password: this.userData.password
            };
            this.app.req.post("api/auth/authenticate", data).then(res => {
                const token = res.data.token;
                sessionStorage.setItem("chatbot_token", token);
                this.$router.push("/admin");
            });
        }
    }

Vue 路线

const routes = [
    {
        path: "/admin",
        component: Navbar,
        name: "navbar",
        meta: {
            authGuard: true
        },
        children: [
            {
                path: "",
                component: Dashboard,
                name: "dashboard"
            },
            {
                path: "users",
                component: Users,
                name: "user"
            }
        ]
    },
    {
        path: "/login",
        component: Login,
        name: "login"
    }
];

const router = new VueRouter({
    routes,
    mode: "history"
});

router.beforeEach((to, from, next) => {
    const loggedInUserDetail = !!sessionStorage.getItem("chatbot_token");
    if (to.matched.some(m => m.meta.authGuard) && !loggedInUserDetail)
        next({ name: "login" });
    else next();
});

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

Answer 1

我记得很清楚，你可以在 this.$router.push 之后使用 catch 子句。然后它看起来像：

 this.$router.push("/admin").catch(()=>{});

这仅允许您避免显示错误，因为浏览器认为异常已被处理。

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

Answer 2

我不认为抑制路由器的所有错误是一种好习惯，我只是挑选了某些错误，如下所示：

 router.push(route).catch(err => {
    // Ignore the vuex err regarding  navigating to the page they are already on.
    if (
      err.name !== 'NavigationDuplicated' &&
      !err.message.includes('Avoided redundant navigation to current location')
    ) {
      // But print any other errors to the console
      logError(err);
    }
  });

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