vue路由警告:Duplicate named routes definition問題

更新時間：2022年09月20日 10:03:01 作者：白日有夢

這篇文章主要介紹了vue路由警告:Duplicate named routes definition問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

警告產(chǎn)生的原因

根據(jù)提示內(nèi)容，我們大概猜測是和路由的name有關(guān)，上網(wǎng)了解了一下，驗證了我們的猜測是正確的。警告是由于路由的name 重復導致的。（原理？who care (艸皿艸 )）

錯誤類型

雖然我們已經(jīng)知道警告是由于name重復導致，其實細分一下還是有點不一樣的。

一是靜態(tài)路由中的name重復，一是動態(tài)路由的name 重復

舉例說明

靜態(tài)路由

錯誤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 是重復的。這樣就會產(chǎn)生Duplicate named routes definition 的警告了。

解決方式：

靜態(tài)路由的解決方式很簡單，只要調(diào)整一下name，使所有name 不重復即可.

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

動態(tài)路由

這里重點要說的是動態(tài)路由。動態(tài)路由一般來說是通過后端接口返回拿到數(shù)據(jù)，然后在路由守衛(wèi)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 運行也會出現(xiàn)警告 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)

刷新頁面會發(fā)現(xiàn)警告已經(jīng)消失了。

但是

頁面初始化的警告消失了，在點擊動態(tài)路由的時候會發(fā)現(xiàn)，還是會出現(xiàn)警告。檢查一下代碼發(fā)現(xiàn)，我們每次頁面跳轉(zhuǎn)的時候，在router.beforeEach 里都會請求一次地址getAside ，重新使用方法addRoutes。

那么讓請求只執(zhí)行一次，會不會就解決問題了尼？

這里我使用了localStorage，頁面初始化設置localStorage 為0，在第一次請求拿到動態(tài)地址之后存儲一下狀態(tài)為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()
  }
})

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: