电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

解決vue路由name同名,路由重復的問題

瀏覽:135日期:2022-12-15 17:54:24

在項目中,想讓路由后綴為空,或者index的時候,都跳轉到路由為index的頁面,于是在router中如下配置

routes: [{ path: ’/’, name: ’index’, component: () => import(’@/components/index’).then(m => m.default) },{ path: ’/index’, name: ’index’, component: () => import(’@/components/index’).then(m => m.default) }]

但是瀏覽器告警信息:

[vue-router] Duplicate named routes definition: { name: 'index', path: '/index' }

因為路由重復添加,name一樣造成,利用redirect重定向

routes: [{ path: ’/’, redirect: { name: index } // name: ’index’, // component: () => import(’@/components/index’).then(m => m.default) },{ path: ’/index’, name: ’index’, component: () => import(’@/components/index’).then(m => m.default) }]

補充知識:vue路由使用踩坑點:當動態路由再使用路由name去匹配跳轉時總是跳轉到根路由的問題

閑話少說,直接問題:

之前我的路由時這么寫的

{ path:’/serverInfo/:id’, name:’serverInfo’, component:() => import(’@/views/serverRequest/SRInfo’)}

但是呢,頭部做了個通知面板,代碼如下:

<el-popover popper- placement='bottom' v-model='visiblity' trigger='click'> <div class='messageBox'> <div class='title'>通知</div> <div v-if='messageData.length === 0'>暫無通知</div> <div v-else> <div v-for='item in messageData' @click='readMessage(item.id)'> <router-link :to='{name:item.route,params:{ messageId:item.rid} }'>{{’【’ + item.message + ’】’}}</router-link> <span>{{item.message_time}}</span> </div> </div> </div> <el-badge slot='reference' :value='messageData.length' :hidden='messageData.length === 0'> <i class='messageStyle iconfont icon-tongzhi'></i> <span class='messageText'>通知</span> </el-badge> </el-popover>

看一下router-link部分通過name去跳轉,并傳遞參數。

然后我們可以看一下頁面,order路由正常的,serverInfo就不正常了

解決vue路由name同名,路由重復的問題

我們看下后臺返回數據也是正常的有路由名字,這就很惆悵了。

然后我們看下order的路由,order沒有動態路由匹配。

{path:’/order’,name:’order’,component:() => import(’@/views/system/order’)},

所以初步猜測:是不是有動態路由匹配時,通過路由name去跳轉,就會匹配不到全路徑,而跑到根路由去呢?

我們現在把serverInfo路由改一下:去掉動態路由匹配

{ path:’/serverInfo’, name:’serverInfo’, component:() => import(’@/views/serverRequest/SRInfo’)}

改了之后,我們之前使用到的路由跳轉的地方也得改下。我們需要傳參數的地方就通過下面這種去傳,也是一樣的

// <router-link :to='’/serverInfo/’+scope.row.srid'> <router-link :to='{name:’serverInfo’,params:{id:scope.row.srid}}'><span>{{scope.row.srid}}</span></router-link>

改成這樣只會就發現一切正常了

解決vue路由name同名,路由重復的問題

所以總結一下:

當使用動態路由匹配的時候,再想通過name去跳轉是會有問題的。當你想用路由name去跳轉的時候,就不要使用動態路由匹配,需要傳參數,就使用params去傳遞參數。

以上這篇解決vue路由name同名,路由重復的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
主站蜘蛛池模板: 减速机三参数组合探头|TSM803|壁挂式氧化锆分析仪探头-安徽鹏宸电气有限公司 | 罐体电伴热工程-消防管道电伴热带厂家-山东沃安电气 | 山东信蓝建设有限公司官网| 烟台螺纹,烟台H型钢,烟台钢材,烟台角钢-烟台市正丰金属材料有限公司 | 水厂自动化|污水处理中控系统|水利信息化|智慧水务|智慧农业-山东德艾自动化科技有限公司 | 引领中高档酒店加盟_含舍·美素酒店品牌官网 | 桁架楼承板-钢筋桁架楼承板-江苏众力达钢筋楼承板厂 | 仓储货架_南京货架_钢制托盘_仓储笼_隔离网_环球零件盒_诺力液压车_货架-南京一品仓储设备制造公司 | 一体化隔油提升设备-餐饮油水分离器-餐厨垃圾处理设备-隔油池-盐城金球环保产业发展有限公司 | 淋巴细胞分离液_口腔医疗器材-精欣华医疗器械(无锡)有限公司 | 全自动贴标机-套标机-工业热风机-不干胶贴标机-上海厚冉机械 | 净气型药品柜-试剂柜-无管道净气型通风柜-苏州毕恩思 | 科研ELISA试剂盒,酶联免疫检测试剂盒,昆虫_植物ELISA酶免试剂盒-上海仁捷生物科技有限公司 | 精密光学实验平台-红外粉末压片机模具-天津博君 | 福州时代广告制作装饰有限公司-福州广告公司广告牌制作,福州展厅文化墙广告设计, | 西门子伺服电机维修,西门子电源模块维修,西门子驱动模块维修-上海渠利 | 杭州顺源过滤机械有限公司官网-压滤机_板框压滤机_厢式隔膜压滤机厂家 | 实木家具_实木家具定制_全屋定制_美式家具_圣蒂斯堡官网 | 合肥通道闸-安徽车牌识别-人脸识别系统厂家-安徽熵控智能技术有限公司 | 兰州UPS电源,兰州山特UPS-兰州万胜商贸 | 防勒索软件_数据防泄密_Trellix(原McAfee)核心代理商_Trellix(原Fireeye)售后-广州文智信息科技有限公司 | 慈溪麦田广告公司,提供慈溪广告设计。| 防水试验机_防水测试设备_防水试验装置_淋雨试验箱-广州岳信试验设备有限公司 | 京马网,京马建站,网站定制,营销型网站建设,东莞建站,东莞网站建设-首页-京马网 | 企业管理培训,企业培训公开课,企业内训课程,企业培训师 - 名课堂企业管理培训网 | 塑胶跑道_学校塑胶跑道_塑胶球场_运动场材料厂家_中国塑胶跑道十大生产厂家_混合型塑胶跑道_透气型塑胶跑道-广东绿晨体育设施有限公司 | 天一线缆邯郸有限公司_煤矿用电缆厂家_矿用光缆厂家_矿用控制电缆_矿用通信电缆-天一线缆邯郸有限公司 | 流程管理|流程管理软件|企业流程管理|微宏科技-AlphaFlow_流程管理系统软件服务商 | 税筹星_灵活用工平台_企业财务顾问_财税法薪综合服务平台 | 学校用栓剂模,玻璃瓶轧盖钳,小型安瓿熔封机,实验室安瓿熔封机-长沙中亚制药设备有限公司 | 冷凝水循环试验箱-冷凝水试验箱-可编程高低温试验箱厂家-上海巨为(www.juweigroup.com) | 餐饮小吃技术培训-火锅串串香培训「何小胖培训」_成都点石成金[官网] | 播音主持培训-中影人教育播音主持学苑「官网」-中国艺考界的贵族学校 | 解放卡车|出口|济南重汽|报价大全|山东三维商贸有限公司 | 细沙回收机-尾矿干排脱水筛设备-泥石分离机-建筑垃圾分拣机厂家-青州冠诚重工机械有限公司 | 标准件-非标紧固件-不锈钢螺栓-非标不锈钢螺丝-非标螺母厂家-三角牙锁紧自攻-南京宝宇标准件有限公司 | 广东风淋室_广东风淋室厂家_广东风淋室价格_广州开源_传递窗_FFU-广州开源净化科技有限公司 | 天津热油泵_管道泵_天津高温热油泵-天津市金丰泰机械泵业有限公司【官方网站】 | 悬浮拼装地板_篮球场木地板翻新_运动木地板价格-上海越禾运动地板厂家 | 全温度恒温培养摇床-大容量-立式-远红外二氧化碳培养箱|南荣百科 | 杰恒蠕动泵-蠕动泵专业厂家-19年专注蠕动泵 |