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

您的位置:首頁技術(shù)文章
文章詳情頁

解決vue路由name同名,路由重復(fù)的問題

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

在項(xiàng)目中,想讓路由后綴為空,或者index的時候,都跳轉(zhuǎn)到路由為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' }

因?yàn)槁酚芍貜?fù)添加,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) }]

補(bǔ)充知識:vue路由使用踩坑點(diǎn):當(dāng)動態(tài)路由再使用路由name去匹配跳轉(zhuǎn)時總是跳轉(zhuǎn)到根路由的問題

閑話少說,直接問題:

之前我的路由時這么寫的

{ 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去跳轉(zhuǎn),并傳遞參數(shù)。

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

解決vue路由name同名,路由重復(fù)的問題

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

然后我們看下order的路由,order沒有動態(tài)路由匹配。

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

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

我們現(xiàn)在把serverInfo路由改一下:去掉動態(tài)路由匹配

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

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

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

改成這樣只會就發(fā)現(xiàn)一切正常了

解決vue路由name同名,路由重復(fù)的問題

所以總結(jié)一下:

當(dāng)使用動態(tài)路由匹配的時候,再想通過name去跳轉(zhuǎn)是會有問題的。當(dāng)你想用路由name去跳轉(zhuǎn)的時候,就不要使用動態(tài)路由匹配,需要傳參數(shù),就使用params去傳遞參數(shù)。

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

標(biāo)簽: Vue
主站蜘蛛池模板: Pos机办理_个人商户免费POS机申请-拉卡拉办理网 | 美国PARKER齿轮泵,美国PARKER柱塞泵,美国PARKER叶片泵,美国PARKER电磁阀,美国PARKER比例阀-上海维特锐实业发展有限公司二部 | 微型气泵-真空-蠕动-水泵-厂家-深圳市品亚科技有限公司 | 热处理温控箱,热处理控制箱厂家-吴江市兴达电热设备厂 | 进口便携式天平,外校_十万分之一分析天平,奥豪斯工业台秤,V2000防水秤-重庆珂偌德科技有限公司(www.crdkj.com) | 铝合金线槽_铝型材加工_空调挡水板厂家-江阴炜福金属制品有限公司 | 聚天冬氨酸,亚氨基二琥珀酸四钠,PASP,IDS - 远联化工 | 透平油真空滤油机-变压器油板框滤油机-滤油车-华之源过滤设备 | 聚氨酯催化剂K15,延迟催化剂SA-1,叔胺延迟催化剂,DBU,二甲基哌嗪,催化剂TMR-2,-聚氨酯催化剂生产厂家 | 合肥汽车充电桩_安徽充电桩_电动交流充电桩厂家_安徽科帝新能源科技有限公司 | 微型驱动系统解决方案-深圳市兆威机电股份有限公司 | 武汉高低温试验机-现货恒温恒湿试验箱-高低温湿热交变箱价格-湖北高天试验设备 | 菲希尔FISCHER测厚仪-铁素体检测仪-上海吉馨实业发展有限公司 | 短信营销平台_短信群发平台_106短信发送平台-河南路尚 | 深圳展厅设计_企业展馆设计_展厅设计公司_数字展厅设计_深圳百艺堂 | 2025世界机器人大会_IC China_半导体展_集成电路博览会_智能制造展览网 | 硫酸亚铁-聚合硫酸铁-除氟除磷剂-复合碳源-污水处理药剂厂家—长隆科技 | 无轨电动平车_轨道平车_蓄电池电动平车★尽在新乡百特智能转运设备有限公司 | 台湾HIWIN上银直线模组|导轨滑块|TBI滚珠丝杆丝杠-深圳汉工 | 制冷采购电子商务平台——制冷大市场 | 闭端端子|弹簧螺式接线头|防水接线头|插线式接线头|端子台|电源线扣+护线套|印刷电路板型端子台|金笔电子代理商-上海拓胜电气有限公司 | 广东恩亿梯电源有限公司【官网】_UPS不间断电源|EPS应急电源|模块化机房|电动汽车充电桩_UPS电源厂家(恩亿梯UPS电源,UPS不间断电源,不间断电源UPS) | 杰福伦_磁致伸缩位移传感器_线性位移传感器-意大利GEFRAN杰福伦-河南赉威液压科技有限公司 | 广州办公室设计,办公室装修,写字楼设计,办公室装修公司_德科 | 杭州画室_十大画室_白墙画室_杭州美术培训_国美附中培训_附中考前培训_升学率高的画室_美术中考集训美术高考集训基地 | jrs高清nba(无插件)直播-jrs直播低调看直播-jrs直播nba-jrs直播 上海地磅秤|电子地上衡|防爆地磅_上海地磅秤厂家–越衡称重 | 防伪溯源|防窜货|微信二维码营销|兆信_行业内领先的防伪防窜货数字化营销解决方案供应商 | 压片机_高速_单冲_双层_花篮式_多功能旋转压片机-上海天九压片机厂家 | app开发|app开发公司|小程序开发|物联网开发||北京网站制作|--前潮网络 | 光栅尺_Magnescale探规_磁栅尺_笔式位移传感器_苏州德美达 | 炉门刀边腹板,焦化设备配件,焦化焦炉设备_沧州瑞创机械制造有限公司 | 密封圈_泛塞封_格莱圈-[东莞市国昊密封圈科技有限公司]专注密封圈定制生产厂家 | 伟秀电气有限公司-10kv高低压开关柜-高低压配电柜-中置柜-充气柜-欧式箱变-高压真空断路器厂家 | 400电话_400电话申请_866元/年_【400电话官方业务办理】-俏号网 3dmax渲染-效果图渲染-影视动画渲染-北京快渲科技有限公司 | ★济南领跃标识制作公司★济南标识制作,标牌制作,山东标识制作,济南标牌厂 | 金环宇|金环宇电线|金环宇电缆|金环宇电线电缆|深圳市金环宇电线电缆有限公司|金环宇电缆集团 | 杭州高温泵_热水泵_高温油泵|昆山奥兰克泵业制造有限公司 | 南京泽朗生物科技有限公司-液体饮料代加工_果汁饮料代加工_固体饮料代加工 | 创绿家招商加盟网-除甲醛加盟-甲醛治理加盟-室内除甲醛加盟-创绿家招商官网 | 交变/复合盐雾试验箱-高低温冲击试验箱_安奈设备产品供应杭州/江苏南京/安徽马鞍山合肥等全国各地 | 钢格栅板_钢格板网_格栅板-做专业的热镀锌钢格栅板厂家-安平县迎瑞丝网制造有限公司 |