vue 路由警告 Duplicate named routes definition

今天在開發的時候，項目報了一個警告  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