vue 路由报[vue-router] Duplicate named routes definition

这里有两种解决办法：

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

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