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

b5buobof 于 2023-03-19 发布在 Vue.js

关注(0)|答案(4)|浏览(218)

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

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

导航到密码页面被成功重定向，但不确定为什么会抛出这个错误。我以前没有观察到这个错误。
Vue路由器版本：vue路由器@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')
  }
]

}

vue.js

来源：https://stackoverflow.com/questions/65284853/vue-router-navigation-cancelled-from-to-password-with-a-new-navigation

4条答案

按热度按时间

oxosxuxt1#

我最近得到了同样的错误.这是发生因为vue路由器不能重定向两次（这意味着你不能重定向在重定向路由）.这是在文档中提到
确保下一个函数在任何给定的导航保护中被调用一次。它可以出现多次，但前提是逻辑路径没有重叠，否则钩子将永远不会被解析或产生错误。
我有一个解决办法，就是创建一个隐藏的vue-route组件，其中包含您要重定向到的路由，然后单击。
示例：

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

当你想重定向时（在你的例子中可能是在用户输入密码之后），你可以在这个链接上触发一个点击事件

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

赞(0）回复(0）举报 2023-03-19

iyzzxitl2#

您应该添加一个catch()来捕获这样的错误：

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

更多信息请参见VueRouter documentation。

赞(0）回复(0）举报 2023-03-19

vaj7vani3#

Vue路由器还提供了一个名为isNavigationFailure的方法来识别错误：

import { isNavigationFailure, NavigationFailureType } from 'vue-router'

// trying to access the admin page
router.push('/admin').catch(failure => {
  if (isNavigationFailure(failure, NavigationFailureType.redirected)) {
    // show a small notification to the user
    showToast('Login in order to access the admin panel')
  }
})

更多信息请点击此处。

赞(0）回复(0）举报 2023-03-19

9udxz4iz4#

我认为解决这个问题的最好方法不是捕捉和忽略，而是调试和检查为什么导航被取消。
如果您正在导航到相同的路线，您应该检查原因。

赞(0）回复(0）举报 2023-03-19