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')
  }
]

}

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

Answer 1

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

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

我有一个解决方法，即创建一个隐藏的 vue-route 组件，其中包含您要重定向到的路由，然后单击。

例子：

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

当你想重定向时（在你的情况下可能是在用户输入密码后）你可以只触发这个链接上的点击事件

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

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