Vue-router 报错NavigationDuplicated的解决方法

下面我来为您详细讲解“Vue-router 报错NavigationDuplicated的解决方法”的完整攻略。

什么是NavigationDuplicated错误?

在使用 Vue-router 进行路由跳转时，有时会出现 “NavigationDuplicated” 错误，这是因为 Vue-router 默认情况下禁止在相同的路由间跳转，比如从当前路由 A 跳转到路由 A，便会触发这个错误。这种情况会影响页面的正常跳转，解决办法是需要配置 Vue-router 的路由选项。

解决方法

路由选项中添加ignoreDuplicates选项

在 Vue-router 3.1.0 以上版本中，可以在路由选项中添加 “ignoreDuplicates” 选项，用于忽略路由重复导致的错误。

示例代码如下：

const router = new VueRouter({
  // ...
  options: {
    ignoreDuplicates: true
  }
})

增加beforeEach路由中断逻辑

在 Vue-router 3.1.0 以下版本中，因为没有 ignoreDuplicates 选项，我们可以通过增加全局的 beforeEach 路由中断逻辑来解决这个问题。

示例代码如下：

const router = new VueRouter({
  // ...
})

router.beforeEach((to, from, next) => {
  if (to.name === from.name) {
    next(false)
  } else {
    next()
  }
})

总结

以上就是解决 Vue-router 报错NavigationDuplicated的两种方法，通过以上操作，我们就可以愉快地使用 Vue-router 进行正常的路由跳转了。