vue-router - 使用新导航取消从“/”到“/password”的导航

Question

尝试导航到密码页面，vue-router 抛出此错误

Uncaught (in promise) Error: Navigation cancelled from "/" to "/password" with a new navigation.

导航到密码页面已成功重定向，但不确定为什么会抛出此错误。我之前没有观察到这个错误。

vue路由器版本： vue-router@3.3.4

点击一个按钮做 this.$router.push({name: 'password', query: {username: this.username}})

在路由器/index.js

{
path: '/',
component: loginComponent,
children: [
  {
    path: '/',
    alias: '/login',
    name: 'login',
    component: () => import('../views/email.vue')
  },
  {
    path: 'password',
    name: 'password',
    component: () => import('../views/password.vue')
  }
]

}

Answer 1

我最近遇到了同样的错误。发生这种情况是因为 vue 路由器无法重定向两次（这意味着您无法在重定向路由中重定向）。文档中提到了这一点

确保在通过导航防护的任何给定传递中，下一个函数被准确调用一次。它可以出现多次，但前提是逻辑路径没有重叠，否则钩子永远不会被解析或产生错误。

我有一个解决方法，即使用vue-route您想要重定向到的路线创建一个隐藏组件，然后单击。

例子：

<router-link ref="redirect" :to="$route.query.redirect ? $route.query.redirect : '/'"></router-link>

当您想要重定向时（也许在用户输入密码后的情况下），您可以触发此链接上的点击事件

this.$refs.redirect.$el.click()

Answer 2

您应该添加一个catch()来捕获此类错误：

this.$router.push({
  name: 'password', 
  query: {
    username: this.username
  }
}).catch();

更多信息请参阅VueRouter 文档。