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:'' },..
这里有两种解决办法:
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
更多推荐
所有评论(0)