javascript - 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 路由器无法重定向两次(这意味着您无法在重定向的路由中重定向)。这在 documentation 中有所提及

Make sure that the next function is called exactly once in any given pass through the navigation guard. It can appear more than once, but only if the logical paths have no overlap, otherwise the hook will never be resolved or produce errors.

我有一个解决方法是创建一个隐藏的 vue-route具有要重定向到的路由的组件，然后单击。
例子:

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

并且当您想要重定向时(可能是在用户输入密码后的情况)，您可以在此链接上触发点击事件

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