NavigationDuplicated：Vue.js路由重复

一、什么是NavigationDuplicated？

NavigationDuplicated错误是Vue.js中常见的错误之一，它表示用户在激活相同路由时发生了错误。它是Vue.js路由系统的默认行为，它可以验证并防止我们的应用程序显示相同的路由。例如，当用户从页面A跳转到页面B，然后再次回到页面A时，如果没有此错误，我们将无法防止用户在刚离开页面A时，再次回到页面A。

二、NavigationDuplicated的常见场景

在Vue.js中，NavigationDuplicated错误的常见场景包括：

1、路由跳转，用户在激活相同的路由时，NavigationDuplicated错误将被触发。

<template>
  <div>
    <router-link :to="{ path: '/home' }">Home</router-link>
    <button @click="$router.push({ path: '/home' })">Go to Home</button>
  </div>
</template>

2、在导航守卫中，当用户需要跳转到相同的路由时，NavigationDuplicated错误将被触发。

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

3、通过代码编程式导航路由时，当用户需要跳转到相同的路由时，NavigationDuplicated错误将被触发。

try {
  await $router.push('/path1')
} catch (error) {
  if (error.name !== 'NavigationDuplicated') throw error
}

三、NavigationDuplicated的解决方法

NavigationDuplicated错误的解决方法有以下几种：

1、重写vue-router的push和replace方法

推荐使用这种方式来解决NavigationDuplicated错误，重写vue-router中的push和replace方法，以便在发生NavigationDuplicated错误时进行适当的处理。

import VueRouter from 'vue-router'

const originalPush = VueRouter.prototype.push
const originalReplace = VueRouter.prototype.replace

VueRouter.prototype.push = function (location) {
  return originalPush.call(this, location).catch(err => err)
}

VueRouter.prototype.replace = function (location) {
  return originalReplace.call(this, location).catch(err => err)
}

2、在Vue组件中进行判断处理

在Vue组件中我们可以使用try/catch语句来捕获NavigationDuplicated异常，并进行相应的处理。

methods: {
  async navigate(path) {
    try {
      await this.$router.push(path)
    } catch (error) {
      if (error.name === 'NavigationDuplicated') {
        // 处理NavigationDuplicated异常
        // ...
      }
    }
  }
}

3、在导航守卫中进行判断处理

在导航守卫中可以进行判断，如果是重复导航，则中止进一步的导航。

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

4、禁用NavigationDuplicated错误

在某些情况下，我们可能需要禁用NavigationDuplicated错误，例如在调试模式下。

const router = new VueRouter({
  // 禁用NavigationDuplicated错误
  // #799
  options: { duplicateNavigationPolicy: 'ignore' },
})

四、总结

NavigationDuplicated是Vue.js路由系统的默认行为，它能够验证并防止我们的应用程序显示相同的路由。在多个场景中出现NavigationDuplicated错误时，我们可以通过在Vue组件中、在导航守卫中、禁用NavigationDuplicated错误以及重写vue-router的push和replace方法等方式进行相应的处理，以解决NavigationDuplicated错误。