[vue-router] Duplicate named routes definition: { name: “XXX“, path: “XXX“ }
[vue-router] Duplicate named routes definition: { name: “XXX”, path: “XXX” }
一、分析原因
翻译过来就是:定义重复命名的路由。
言外之意就是,与之前命名过该路由名称的路由发生了冲突,所以Vue发出警告。
那为什么是警告?有部分开发人员又或是新手小白觉得,只要不是报bug,那我就不管了,不想浪费自己时间。当你有这种想法的时候你该庆幸你不是在我的团队里,不然我就梆梆给你来两下。
首先查看警告详情:
点进去看看。
找到报warning的位置了,看了一下,这里的意思就是:如果不是生产环境下,那我就给你报这个warning。但是,我们知道这个好像没很大用处对吧,接着看:
在这里找到了有用的信息(其他的也可以点进去看一下,打破砂锅问到底!):
解析:Vue先判断新创建的路由是否有name属性,当有name属性的时候,如果新的name不在nameMap里面,那就把新的name添加到record里面并且赋值nameMap为更新后的record。否则,且在非生产环境下,就会报warning,这时候就会看见我们开头时候的那个警告。
二、静态添加路由的解决方法
所谓静态添加路由,就是我们在开发Vue项目的时候,存放在router
文件夹里面的index.js
文件,里面的路由都是我们事先定义好,最后再由Vue编译挂载到项目上面的。
如果出现上述的问题,那么解决的方法很简单,就是不要存在name
属性相同的路由即可:
这样子,就不会报warning。
三、动态添加路由的解决方法
那什么是动态添加路由呢?
this.router.options.routes可以拿到初始化时配置的路由规则;this.router.options.routes 可以拿到初始化时配置的路由规则; this.router.options.routes可以拿到初始化时配置的路由规则;this.route 可以拿到当前路由信息 (包括路由路径,参数0)
我们在开发的过程中,尤其是后台管理系统,常常需要开发关于用户的权限管理,以此来判断用户可操作的界面菜单的选项。例如在用户登录的时候,编写以下代码:
addRouteList() {// 重新划分路由let routes = [login,register,...];// 为路由的初始值重新赋值this.$router.options.routes = routes;// 动态添加/更新路由this.$router.addRoutes(this.$router.options.routes);
}
然后退出登录的时候,把动态添加的部分路由去掉:
addRouteList() {// 重新划分路由,只保留登录注册let routes = [login,register];// 为路由的初始值重新赋值this.$router.options.routes = routes;// 动态添加/更新路由this.$router.addRoutes(this.$router.options.routes);
}
至此,动态添加路由已经完成,但是会存在我们文章开头发现的那个warning,凡是在第一次动态添加过的路由,二次动态添加的时候,全部都会出现这些(这里尚不清楚是什么原因,所以希望官方在新版本可以解决这个问题)。但功能逻辑操作上,一切都没有问题。所以我们接下来需要完善一下,解决命名重复的问题。
在router/index.js文件中,键入以下代码:
router.$addRoutes = (params) => {router.matcher = new Router({mode: 'history'}).matcherrouter.addRoutes(params)
}
重新编译,然后就不会出现warning了。
[vue-router] Duplicate named routes definition: { name: “XXX“, path: “XXX“ }相关推荐
- 【记录21】[vue-router] Duplicate named routes definition: { name: “details“, path: “/equiment/details“
问题: 报错或预警:[vue-router] Duplicate named routes definition: { name: "details", path: "/ ...
- 浏览器出现的报错信息为:Duplicate named routes definition: { name: home, path: /index }
路由这样写就会报上面的错误: {path: '/',name: 'home',component: home,redirect: '/index', }, {path: '/index',name: ...
- [vue-router] Duplicate named routes definition
浏览器告警信息 [vue-router] Duplicate named routes definition: { name: "index", path: "/inde ...
- Duplicate named routes definition:
[vue-router] Duplicate named routes definition: { name: "模板", path: "/exam/" } 这 ...
- vue 路由报[vue-router] Duplicate named routes definition
这里有两种解决办法: 1.检查下有没有name重名的路由,比如像下面这样: {path: '/storage-pool',name: 'storagePool', // name 1component ...
- vue 路由警告 Duplicate named routes definition
今天在开发的时候,项目报了一个警告 Duplicate named routes definition ,这里记录一下解决方式和思路. 警告产生的原因 根据提示内容,我们大概猜测是和路由的name有 ...
- Duplicate named routes definition
初始化后台菜单的时候报了一堆Duplicate named routes definition, 原因:没有判断addRoutes是否成功,以下为正确逻辑:判断vuex中是否存在menus,当存在之后 ...
- [警告][vue-router] Duplicate named routers definition: {name: “index“, path: “/index“}
[警告][vue-router] Duplicate named routers definition: {name: "index", path: "/index&qu ...
- vue-router.esm.js?081a:16 [vue-router] Duplicate named routes definition(问题篇)
1.vue路由报的警告,原因是路由name名称重复了.如下图: 2.解决办法: 找到src文件下router下的index.js文件. 修改name,将相同的name改一下名称 3.保存刷新页面,看控 ...
- vue-router.esm.js?fe87:16 [vue-router] Duplicate named routes definition:
解决办法
最新文章
- android 白天和夜间模式切换时闪屏问题处理方法
- 一个超干货的3D视觉学习社区
- Dockerfile 里指定执行命令用RUN 、ENTRYPOING和用CMD有何不同?
- Python 异常处理--raise函数用法
- RuoYi-Process多模块activity工作流项目快速搭建
- centos 更改mysql数据库目录位置_centos更改MySQL数据库目录位置
- OpenCV级联识别器cascade recognizer的实例(附完整代码)
- 《消逝的光芒》为何能成为Steam热销榜常客 ?
- ansible模块介绍
- JVM初学之JVM的垃圾回收机制与垃圾回收器
- 唤醒锁: 检测 Android* 应用中的 No-Sleep(无法进入睡眠)问题
- Java实现通过ssh远程连接主机并执行命令
- 详解大小额支付与超级网银
- (已解决)Failed to execute goal on project ...: Could not resolve dependencies for project ...
- python爬取链家租房信息_爬取链家租房信息数据分析
- Python绘制XRD图谱和对应pdf卡片堆叠图
- Java基础算法,获得相反数
- 机器学习方法三要素理解:模型、策略、算法
- 数学中常见的arg min,arg max是什么意思
- 利用AJAX做天气预报
热门文章
- 评人工智能如何走向新阶段?
- 【心电信号】基于matlab GUI自适应滤波+平滑滤波+小波滤波心电信号处理【含Matlab源码 1809期】
- 【滤波器】基于matlab GUI高通+低通+带通+带阻FIR滤波器设计【含Matlab源码 100期】
- 【图像压缩】基本matlab DCT+量化+huffman JPEG图像压缩【含Matlab源码 1217期】
- 【车牌识别】基于matlab形态学车牌识别【含Matlab源码 1155期】
- 【CVRP】基于matlab蚁群算法求解带容量的车辆路径规划问题【含Matlab源码 1039期】
- android设置view透明度渐变,android中 怎么实现一张图片从左到右透明度改变渐变消失的动画效果 Android 动态渐变 泽.. - 贪吃蛇学院-专业IT技术平台...
- python字典统计字母出现次数_第三篇 python运用字典统计字符串中字母出现的次数...
- 用html和css做动态动物,CSS3 SVG实现可爱的动物哈士奇和狐狸动画
- 武汉大学计算机学院c语言试题,武汉大学计算机学院C语言历年试题(48页)-原创力文档...