vue路由警告:Duplicate named routes definition问题
今天在开发的时候，项目报了一个警告 Duplicate named routes definition ，这里记录一下解决方式和思路。
警告产生的原因
根据提示内容，我们大概猜测是和路由的name有关，上网了解了一下，验证了我们的猜测是正确的。警告是由于路由的name 重复导致的。（原理？who care (艹皿艹 )）
错误类型
虽然我们已经知道警告是由于name重复导致，其实细分一下还是有点不一样的。
一是静态路由中的name重复，一是动态路由的name 重复
举例说明
静态路由
错误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 是重复的。这样就会产生Duplicate named routes definition 的警告了。
解决方式：
静态路由的解决方式很简单，只要调整一下name，使所有name 不重复即可.
例如，将以上的name 分别设置为name : 'storagePool' , name: 'DragTable', name: 'storagePool2', name: 'DragTable2'
动态路由
这里重点要说的是动态路由。动态路由一般来说是通过后端接口返回拿到数据，然后在路由守卫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 运行也会出现警告 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)
刷新页面会发现警告已经消失了。
但是
页面初始化的警告消失了，在点击动态路由的时候会发现，还是会出现警告。检查一下代码发现，我们每次页面跳转的时候，在router.beforeEach 里都会请求一次地址getAside ，重新使用方法addRoutes。
那么让请求只执行一次，会不会就解决问题了尼？
这里我使用了localStorage，页面初始化设置localStorage 为0，在第一次请求拿到动态地址之后存储一下状态为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()
}
})以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue、react等单页面项目应该这样子部署到服务器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
这篇文章主要为大家介绍了vue3+ts中ref及reactive如何指定类型的实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了如何解决ECharts图表切换后缩成一团的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue3父子通讯方式及Vue3插槽的使用方法详解,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue页面更新patch的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
众所周知，vue 的 mixins 是个非常灵活，但又很容易带来混乱的 API，Mixins 本该是一种强大的重用代码的手段，但使用之后往往带来更多的混乱，代码变得不易维护，本文就详细介绍Vue Mixin的正确用法,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Vue前端整合Element Ui,本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
本文主要介绍了vue中动态修改img标签中src的方法实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要介绍了Vue3中使用vuedraggable拖拽实战教程,文中通过示例介绍了vue3拖拽组件vuedraggable的使用demo，需要的朋友可以参考下2023-06-06
关于element-ui中@selection-change执行两次的问题
这篇文章主要介绍了关于element-ui中@selection-change执行两次的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最新评论