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錯誤。