这里有两种解决办法:

1.检查下有没有name重名的路由,比如像下面这样:

{
    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'

2.如果发现自己的name并没有重名,那么一般是后台动态路由导致的报错警告。动态路由一般来说是通过后端接口返回拿到数据,然后在路由守卫router.beforeEach 中进行添加。

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

以上demo 运行也会出现警告 Duplicate named routes definition,这里的重点是方法 addRoutes,因为: addRoutes 方法仅仅是帮你注入新的路由,并没有帮你剔除其它路由。

解决方式:

在router/index.js中写上这段代码:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const createRouter = () => new Router({
mode: 'history',
routes: []
})

const router = createRouter()

export function resetRouter () {
const newRouter = createRouter()
router.matcher = newRouter.matcher // the relevant part
}

export default router

然后做以下操作:

import { resetRouter } from  router/index.js

router.beforeEach(async(to, from, next) => {
  if (to.name === 'storageNew') {
    getAside().then(res => {
      resetRouter() // 重置路由
      router.addRoutes(res)
      next()
    })
  } else {
    next()
  }
})

刷新页面会发现警告已经消失了。因为我负责的路由权限系统,router.addRoutes(res)仅仅是只执行一次,所以以上解决方法有效。

如果有的小伙伴的代码中,跳转动态路由执行了多次router.addRoutes(res),那就参考以下文章解决吧vue 路由警告 Duplicate named routes definition

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐