今天在開發的時候，專案報了一個警告  Duplicate named routes definition ，這裡記錄一下解決方式和思路。

警告產生的原因
根據提示內容，我們大概猜測是和路由的name有關，上網瞭解了一下，驗證了我們的猜測是正確的。警告是由於路由的name 重複導致的。（原理？who care (艹皿艹 )）

錯誤型別
雖然我們已經知道警告是由於name重複導致，其實細分一下還是有點不一樣的。

一是靜態路由中的name重複，一是動態路由的name 重複

舉例說明
靜態路由：
錯誤demo：

{
    path: '/storage-pool',
    name: 'storagePool',   //
 
 name 1
    component: Layout,
    children: [
      {
        path: 'drag-table',
        name: 'DragTable', // name 2
        meta: { title:'' },
        component: () => import('@/views/storage-pool/storage-pool/index')
      }
    ]
  },
{
    path: '/pool',
    name: 'storagePool', // name 3
    component: Layout,
    children: [
      {
        path: 
 
'drag-table',
        name: 'DragTable2', // name 4
        meta: { title: ''},
        component: () => import('@/views/storage-pool/storage-pool/index')
      }
    ]
  },

以上demo 包括子路由一共有4個name值，其中name1 和name3 是重複的。這樣就會產生Duplicate named routes definition 的警告了。

解決方式：

靜態路由的解決方式很簡單，只要調整一下name，使所有name 不重複即可.

例如，將以上的name 分別設定為name : 'storagePool' , name: 'DragTable', name: 'storagePool2', name: 'DragTable2'

動態路由：

這裡重點要說的是動態路由。動態路由一般來說是通過後端介面返回拿到資料，然後在路由守衛router.beforeEach 中進行新增。

錯誤Demo：

router.beforeEach(async(to, from, next) => {
  if (to.name === 'storageNew') {
    getAside().then(res => {
      router.options.routes = res 
      router.addRoutes(router.options.routes)
      next()
    })
  } else {
    next()
  }
})

以上demo 執行也會出現警告 Duplicate named routes definition，這裡的重點是方法 addRoutes，因為： addRoutes 方法僅僅是幫你注入新的路由，並沒有幫你剔除其它路由。

解決方式：

這裡我們使用addRoutes之前，將新的路由記錄傳遞給matcher。即：router.matcher = new Router().matcher

放在一起就是

。。。
router.options.routes = res
router.matcher = new Router().matcher //match
router.addRoutes(router.options.routes)

重新整理頁面會發現警告已經消失了。

但是，頁面初始化的警告消失了，在點選動態路由的時候會發現，還是會出現警告。檢查一下程式碼發現，我們每次頁面跳轉的時候，在router.beforeEach 裡都會請求一次地址getAside ，重新使用方法addRoutes。

那麼讓請求只執行一次，會不會就解決問題了尼？

這裡我使用了localStorage，頁面初始化設定localStorage 為0，在第一次請求拿到動態地址之後儲存一下狀態為1，之後由於是單頁面不會重新整理頁面，那麼只要在beforeEach新增判斷就可以了。

完整程式碼：

window.localStorage.setItem('storageAside', '0')
router.beforeEach(async(to, from, next) => {
  if (to.name === 'storageNew' && window.localStorage.getItem('storageAside') === '0') {
    getAside().then(res => {
      window.localStorage.setItem('storageAside', '1')
      router.options.routes = res
      router.matcher = new Router().matcher
      router.addRoutes(router.options.routes)
      next()
    })
  } else {
    next()
  }
})

————————————————
版權宣告：本文為CSDN博主「白日有夢」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：vue 路由警告 Duplicate named routes definition

以上demo 包括子路由一共有4個name值，其中name1 和name3 是重複的。這樣就會產生Duplicate named routes definition 的警告了。
解決方式：靜態路由的解決方式很簡單，只要調整一下name，使所有name 不重複即可.
例如，將以上的name 分別設定為name : 'storagePool' , name: 'DragTable', name: 'storagePool2', name: 'DragTable2'
動態路由：這裡重點要說的是動態路由。動態路由一般來說是通過後端介面返回拿到資料，然後在路由守衛router.beforeEach 中進行新增。
錯誤Demo：————————————————版權宣告：本文為CSDN博主「白日有夢」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。原文連結：https://blog.csdn.net/qq_37026254/article/details/115954342