关于vue-router定义同名路由动态路由会截胡后面写的静态路由解决办法

已于 2022-05-05 19:10:53 修改
阅读量1k 收藏 2
点赞数 1
文章标签： vue.js 前端 javascript
于 2022-05-05 18:39:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pymlist/article/details/124593179
版权
本文介绍了在Vue Router中遇到的同名路由静态与动态路径冲突问题，即静态路由被动态路由截胡的情况。解决方法包括调整路由定义顺序和使用正则表达式限制动态路由匹配。通过在动态路由内添加正则验证，可以精确控制路由匹配，避免冲突。同时讨论了两种解决方案的适用性和优缺点。
摘要由CSDN通过智能技术生成

路由路径中有两个同名路径，一个为动态一个为静态时会出现截胡问题，下面用图片来形象描述一下这个问题

静态路由放动态路由前

vue-router下index.js定义的路由规则
router下index.js配置路由规则在这里插入图片描述
在这里插入图片描述
上面代码最终会展现出以下形式
在这里插入图片描述在这里插入图片描述

这种方式将静态路由写在动态路由前页面可以正常显示，当将静态路由和动态路由调换位置，如下图
在这里插入图片描述
最终代码表现形式
在这里插入图片描述
在这里插入图片描述
这时发现不管是动态路由还是静态路由都是一个页面，因为动态路由这种写法 :id 随机匹配可以写成任意值，而静态路由写的是写死的路径，规则匹配验证时因为 :id 可以为任意值，所以从声明规则的先后顺序进行规则的匹配理所当然动态路由就将后面的同名路由下的静态路由截胡了，那怎么避免呢，把静态的同名路由放到动态路由不失是一种结局办法，但是不够严谨，所以荡了一遍vue的官网后找到了解决方案，在vue匹配路径中可以使用正则表达式。vue在参数中自定义正则在这里插入图片描述
在这里插入图片描述
总结一下：解决同名静态路由被动态路由所截胡问题

  1. 方法一：将同名静态路由放在同名静态路由之前，路由规则匹配时会按照路由规则定义的先后顺序进行验证（不推荐）
  2. 方法二：在动态路由内加上正则验证，用正则表达式来规定动态路由的类型

望能解决你我共同遇到的问题，加油CV攻城狮

封景_
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
【第三趴】uni-app页面搭建与路由配置（了解工程目录结构、学会搭建页面、配置路由并成功运行）
官方推荐
11-14 3万+
了解 uni-app 工程目录结构、学会搭建页面、配置页面并成功运行
Vue和Vue-Element-Admin（一）：Vue基础和框架
叶子叶来
10-27 9616
前后端开发容易有成就感，对前端的变魔术式的展示效果和开发一直很感兴趣，奈何毕业后3年都在做大数据平台和数据分析相关的东西，全是业务思路没有IT思路； 当前项目涉及了2个前端展示系统，基于vue-element-admin的前端框架进行前后端分离开发，选择vue-element-admin框架，它是一个vue+element ui的开源技术方案：vue-element-admin 码云地址，教程：vue-element-admin教程，下载即可运行，熟悉vue开发模式即可快速上手，界面看起来比较简洁清爽。.
解决vue路由name同名,路由重复的问题
10-15
主要介绍了解决vue路由name同名,路由重复的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 路由id_vue | router路由动态传参携带id进入详情页的三种模式
weixin_34101914的博客
12-23 2096
在项目中,通过一个列表进入详情页,携带参数id渲染不同的详情页,动态传参使用编程式跳转vue传参方法一在router路由配置中{path: '/article/:id',name: 'Article',component: Article,}在列表页中点击事件handleClick(id){this.$router.push(`/article/${id}`) ;}在详情页中使用params获取m...
记Vue-router因路由名称重复引发的bug
最新发布
qq_44957574的博客
07-27 228
本篇记录了在使用vue-router时出现的错误情况，最终通过阅读官网解决。
vue 相同的id不合并_解决vue路由name同名,路由重复的问题
weixin_39855796的博客
12-21 619
在项目中，想让路由后缀为空，或者index的时候，都跳转到路由为index的页面，于是在router中如下配置routes: [{path: '/',name: 'index',component: () => import('@/components/index').then(m => m.default)},{path: '/index',name: 'index',compone...
vue路由 重复点击同一个路由处理
黑玫瑰
03-10 626
Element-ui 重复点击同一个路由 会报错: NavigationDuplicated {_name: “NavigationDuplicated”, name: “NavigationDuplicated”} 解决办法： 在router/index.js import Vue from 'vue' import VueRouter from 'vue-router' import store from '@/store' Vue.use(VueRouter) //解决路由跳转原路由或者刷
vue 中动态改变页面标题，两步解决所有问题
like245660的博客
09-27 572
1、在router.js中增加对象 meta:{title:‘首页'} 2、 router.beforeEach((to, from, next) => { /* 路由发生变化修改页面title */ if (to.meta.title) { document.title = to.meta.title; } next(); })
vue 解决addRoutes多次添加路由重复的操作
10-14
Vue Router是官方推荐的路由库，它允许我们动态配置和管理应用程序的路由。本文将深入探讨如何解决在Vue应用中使用`addRoutes`方法多次添加路由导致重复的问题。 首先，让我们了解`addRoutes`的基本用法。在Vue ...
【Vue知识点- No7.】路由、vant组件库的使用
qq_48687155的博客
07-24 578
1. 能够了解单页面应用概念和优缺点 2. 能够掌握vue-router路由系统使用 3. 能够掌握链接导航和编程式导航用法 4. 能够掌握路由嵌套和路由守卫 5. 能够掌握vant组件库基础使用
Vue3-34-路由-路由配置参数 props
northcastle的博客
01-03 2372
vue3 中 路由的参数配置 -props 的使用
vue路由跳转页面title随之变化
WEB_CSDN_SHARE的博客
03-13 1152
一、通过路由钩子 1.每个路由添加一个meta [ { path:'/index', component:'Index', meta: { title: '首页' }, } ] 2.main.js文件加入钩子函数 new Vue({ el: '#app', router, components: { App ...
vue-router中多个路由引用同一异步组件的解决方案
云帆的博客
05-26 4893
得益于vue-router对异步组件的支持，我们在异步import的then回调中修改组件的name，这样每个组件实例就有唯一的缓存键值，正常被缓存、销毁，并且路由名称也不会冲突了。当你想使用路由name跳转到其中一个路由时，由于三个路由重名了，可能会导致不是预期的结果。路由重名vue-router会报警告。效果和方案1一样，只是路由不用重名了。
vue打开二级或者三级页面传输对象，再刷新浏览器数据丢失问题解决（vue使用router传递数据）
ying940718的博客
07-24 957
vue使用router进行跳转 如果只是单纯的URL跳转的话，直接指定path就可以了 this.$router.push({path:'whiteList'}}); 如果需要使用router进行单纯的字符串传输 this.$router.push({path:'throughList',query:{id:id}}); 要跳转的画面取传输数据使用 this.$route.query.id ...
vue跳转相同路由强制刷新该相同路由组件
hhb442的博客
03-15 3639
而vue自身如果路由不变的情况下是不会这样做的，就是说跳转的路由和当前的路由相同，vue不会进行任何操作，平时开发的时候可能遇到这种需求，在打开该菜单页面的情况下，再次点击菜单需要刷新该组件（销毁再创建）。如果想销毁原路由组件并重新加载一个相同的路由，需要进行以下操作。这样跳转相同路由就能强制刷新组件了，因为key值不同。
vue关于静态路由和动态路由：
weixin_48123820的博客
05-23 3458
这篇文章写得超详细！！！👇。
vue路由name同名，路由重复问题
热门推荐
qq_37582010的博客
11-21 1万+
在项目中，想让路由后缀为空，或者index的时候，都跳转到路由为index的页面，于是在router中如下配置 routes: [{ path: '/', name: 'index', component: () => import('@/components/index').then(m => m.default) },{ path: '/in...
路由命名重复：[vue-router] Duplicate named routes definition
nbclasszj的博客
05-09 363
以上这种情况，大概率是动态路由造成的原因： router.addRoutes。1 在router/index.js 中，需要定义一个清空路由的方法。3 在 router.addRoutes 动态路由添加前，先清空路由。2 在你添加动态路由的地方引入 resetRouter。看到下面警告，两眼一黑。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值