vue路由警告:Duplicate named routes definition问题
作者:白日有梦 时间:2024-05-13 09:13:23
今天在开发的时候,项目报了一个警告 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()
}
})
以上为个人经验,希望能给大家一个参考,也希望大家多多支持asp之家。
来源:https://blog.csdn.net/qq_37026254/article/details/115954342
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
带中英文翻译功能的收藏夹
flask项目集成swagger的方法
![](https://img.aspxhome.com/file/2023/1/68381_0s.png)
golang gorm实现get请求查询案例测试
![](https://img.aspxhome.com/file/2023/5/127035_0s.png)
flask框架实现连接sqlite3数据库的方法分析
基于Python数据结构之递归与回溯搜索
从XML中读取数据到内存的实例
轻松解决SQL Server 2005中的常见问题
Python编程使用NLTK进行自然语言处理详解
![](https://img.aspxhome.com/file/2023/1/68281_0s.jpg)
python使用Pycharm创建一个Django项目
![](https://img.aspxhome.com/file/2023/4/110054_0s.png)
Mysql中使用时间查询的详细图文教程
![](https://img.aspxhome.com/file/2023/0/77210_0s.png)
完整java开发中JDBC连接数据库代码和步骤
Perl字符串处理函数大全
AspJpeg组件:介绍、注册、高级使用方法
如何基于Python实现自动扫雷
![](https://img.aspxhome.com/file/2023/8/85128_0s.jpg)
Go语言hello world实例
select * from sp_who的解决方案
python 列表降维的实例讲解
django 中的聚合函数,分组函数,F 查询,Q查询
Python实现一个简单的毕业生信息管理系统的示例代码
![](https://img.aspxhome.com/file/2023/1/72161_0s.jpg)