快捷導(dǎo)航

vue路由警告:Duplicate named routes definition問(wèn)題

更新時(shí)間：2022年09月20日 10:03:01 作者：白日有夢(mèng)

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

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

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

錯(cuò)誤類型

雖然我們已經(jīng)知道警告是由于name重復(fù)導(dǎo)致，其實(shí)細(xì)分一下還是有點(diǎn)不一樣的。

一是靜態(tài)路由中的name重復(fù)，一是動(dòng)態(tài)路由的name 重復(fù)

舉例說(shuō)明

靜態(tài)路由

錯(cuò)誤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個(gè)name值，其中name1 和name3 是重復(fù)的。這樣就會(huì)產(chǎn)生Duplicate named routes definition 的警告了。

解決方式：

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

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

動(dòng)態(tài)路由

這里重點(diǎn)要說(shuō)的是動(dòng)態(tài)路由。動(dòng)態(tài)路由一般來(lái)說(shuō)是通過(guò)后端接口返回拿到數(shù)據(jù)，然后在路由守衛(wèi)router.beforeEach 中進(jìn)行添加。

錯(cuò)誤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 運(yùn)行也會(huì)出現(xiàn)警告 Duplicate named routes definition，這里的重點(diǎn)是方法 addRoutes，因?yàn)椋?nbsp;addRoutes 方法僅僅是幫你注入新的路由，并沒(méi)有幫你剔除其它路由。

解決方式：

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

放在一起就是

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

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

但是

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

那么讓請(qǐng)求只執(zhí)行一次，會(huì)不會(huì)就解決問(wèn)題了尼？

這里我使用了localStorage，頁(yè)面初始化設(shè)置localStorage 為0，在第一次請(qǐng)求拿到動(dòng)態(tài)地址之后存儲(chǔ)一下?tīng)顟B(tài)為1，之后由于是單頁(yè)面不會(huì)刷新頁(yè)面，那么只要在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()
  }
})

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

您可能感興趣的文章: