路由命名重复：[vue-router] Duplicate named routes definition

于 2024-05-09 11:03:30 发布
阅读量296 收藏
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nbclasszj/article/details/138604454
版权

看到下面警告，两眼一黑

以上这种情况，大概率是动态路由造成的原因： router.addRoutes

解决方法：

1 在router/index.js 中，需要定义一个清空路由的方法

2 在你添加动态路由的地方引入 resetRouter

3 在 router.addRoutes 动态路由添加前，先清空路由

接口写好了吗?
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vue路由name同名,路由重复的问题
10-15
主要介绍了解决vue路由name同名,路由重复的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router-simple:vue-router 哈希和历史记录
05-29
reloads for developmentyarn serveCompiles and minifies for productionyarn buildLints and fixes filesyarn lintCustomize configurationSee .vueRouter实现原理课程介绍Vue Router基础回顾Hash模式和History...
vue 路由警告 Duplicate named routes definition
热门推荐
嗝~
04-21 6万+
今天在开发的时候，项目报了一个警告Duplicate named routes definition ，这里记录一下解决方式和思路。 警告产生的原因 根据提示内容，我们大概猜测是和路由的name有关，上网了解了一下，验证了我们的猜测是正确的。警告是由于路由的name 重复导致的。（原理？who care (艹皿艹 )） 错误类型 虽然我们已经知道警告是由于name重复导致，其实细分一下还是有点不一样的。 一是静态路由中的name重复，一是动态路由的name 重复 举例说明 静态路由： ..
[vue-router] Duplicate named routes definition: { name: “XXX“, path: “/XXX“ }
初心不改
09-22 2444
Vue浏览器提示路由重定义，未加重定向的原因。 const routes = [ { path: '/', redirect: { name: 'Home' } }, { path: '/', name: 'Home', component: Home, children: [ { path: '/index', name: 'Index', component: ()
[vue-router] Duplicate named routes definition: { name: “XXX“, path: “XXX“ }
LizequaNNN的博客
10-08 1万+
[vue-router] Duplicate named routes definition: { name: “XXX”, path: “XXX” } 一、分析原因 翻译过来就是：定义重复命名的路由。 言外之意就是，与之前命名过该路由名称的路由发生了冲突，所以Vue发出警告。 那为什么是警告？有部分开发人员又或是新手小白觉得，只要不是报bug，那我就不管了，不想浪费自己时间。当你有这种想法的时候你该庆幸你不是在我的团队里，不然我就梆梆给你来两下。 首先查看警告详情： 点进去看看。 找到报warnin
[vue-router] Duplicate named routes definition
业余前端的职业经历
02-16 3024
表示路由中出现了重名的路由 笔者出现这个原因是 使用动态路由加载了俩个 name:"home" name:"home"的情况
vue-router之解决addRoutes使用遇到的坑
11-20
最近项目中使用了vue-router的addRoutes这个api，遇到了一个小坑，记录总结一下。 场景复现： 做前端开发的同学，大多都遇到过这种需求：页面菜单根据用户权限动态生成，一个常见的解决方案是： 前端初始化的时候，...
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
vue-taro-router:基本 Taro ，扩展成 vue-router 的使用体验
05-28
VueTaroRouter基本 Taro ，扩展成 vue-router 的使用体验Installationnpm i vue-taro-router -SUsage// router.jsimport VueTaroRouter from "vue-taro-router";const router = new VueTaroRouter();// 添加拦截器...
微信小程序开发附源码：vue-router history模式下的微信分享小结.doc
05-18
微信小程序开发附源码：vue-router history模式下的微信分享小结
[vue-router] Duplicate named routes definition: { name: “settings“, path: “/settings/“ }路由重复
weixin_48837605的博客
09-08 669
产生的原因:退出系统,在今日的时候会报路由重复的警告,刷新信息的时候是没有的,因为这使用router.addRoutes动态添加路由,退出系统的时候并没有清除动态路由,所以会报错误 效果: 解决方式:退出项目系统的时候清空路由 在router的index.vue中已经定义了方法: // 清除动态路由 export function resetRouter(){ const newRouter= createRouter() router.matcher = newRouter.matcher /
[vue-router] Duplicate named routes definition动态路由addRoutes的踩坑
几百块的博客
11-25 1541
踩坑记录：[vue-router] Duplicate named routes definition动态路由addRoutes的坑 问题描述： 第一次进入页面，左侧静态路由和动态路由列表均能正常显示，！但点击左侧其他路由后浏览器报警告[vue-router] Duplicate named routes definition…,并且跳转失败 动态路由的概念： 一般来说是通过后端接口返回拿到数据，不同人不同权限，返回的数据也不同。然后在路由守卫router.beforeEach 中进行添加路由 解决方案：
【vue+router】解决路由重复警告：[vue-router] Duplicate named routes definition
栀妹儿的炼丹炉
06-09 9389
【解决控制台警告】路由重复警告：[vue-router] Duplicate named routes definition
bug（警告）：[vue-router] Duplicate named routes definition: …
最新发布
qq_45796592的博客
04-18 826
[vue-router] Duplicate named routes definition: …警告消除
VUE控制台报错： [vue-router] Duplicate named routes definition: { name: "NotFound", path: "*" }
yangwq的博客
04-29 3050
VUE控制台报错： [vue-router] Duplicate named routes definition: { name: "NotFound", path: "*" } 将下面写法 { path: "*", name: 'NotFound', redirect: "/404" } 改为 { path: "*", redirect: { name: ...
vue项目中控制台报出[vue-router] Duplicate named routes definition: { name: “settings“, path: “/settings/“ }
大牛的博客
08-31 720
问题 退出后，再次登陆，发现菜单异常 （控制台有输出说路由重复）； 原因 路由设置是通过router.addRoutes(filterRoutes)来添加的，退出时，并没有清空，再次登陆，又加了一次，所以有重复。 需要将路由权限重置 (恢复默认) 将来登录后再次追加才可以，不然的话，就会重复添加 解决 // 在router/index.js文件中配置一个重置路由的方法 // 重置路由 export function resetRouter() { const newRoute.
vue动态添加路由，跳转页面时，页面报错路由重复： [vue-router] Duplicate named routes definition: {
z1712636234的博客
05-28 1万+
之前用了一个vue-element-admin做了一个小项目，里面用到了动态添加路由，动态展示侧边栏， 当我切换页面时，控制台总是警告提示路由重复，连续跳转几次页面后，控制台就被这些警告占满了， vue动态添加路由，跳转页面时，页面报错路由重复： 于是处理一下 原因addRoutes 方法仅仅是帮你注入新的路由，并没有帮你剔除原有的其它路由！ 我们先看一下原来代码 路由拦截器中的代码： permission.js: router.beforeEach((to, from, nex.
[vue-router] Duplicate named routes definition:
01-27
在Vue Router中，如果定义了重复的路由名称，就会出现"Duplicate named routes definition"的警告。这个问题通常出现在使用`addRoutes`方法动态添加路由时。 解决这个问题的方式有两种： 1. 确保每个路由的名称都是唯一的，不重复。可以通过检查路由配置文件或者动态添加路由时的逻辑来避免重复定义路由名称。 2. 如果确实需要动态添加重复的路由名称，可以使用`replace`方法替换已有的路由。这样可以避免出现重复定义的警告。 下面是一个示例代码，演示了如何解决"Duplicate named routes definition"的问题： ```javascript // 路由配置文件 const routes = [ { path: '/home', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ] // 动态添加路由 const newRoutes = [ { path: '/news', name: 'home', // 重复定义了名称为'home'的路由 component: News } ] // 解决方式1：确保每个路由的名称都是唯一的 const uniqueRoutes = newRoutes.filter(route => { return !routes.some(existingRoute => existingRoute.name === route.name) }) routes.push(...uniqueRoutes) // 解决方式2：使用replace方法替换已有的路由 const existingRouteIndex = routes.findIndex(route => route.name === newRoutes[0].name) if (existingRouteIndex !== -1) { routes.splice(existingRouteIndex, 1, newRoutes[0]) } // 创建路由实例 const router = new VueRouter({ routes }) ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值