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

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

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

瀏覽:134日期: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
主站蜘蛛池模板: nalgene洗瓶,nalgene量筒,nalgene窄口瓶,nalgene放水口大瓶,浙江省nalgene代理-杭州雷琪实验器材有限公司 | 电动百叶窗,开窗器,电动遮阳百叶,电动开窗机生产厂家-徐州鑫友工控科技发展有限公司 | 5nd音乐网|最新流行歌曲|MP3歌曲免费下载|好听的歌|音乐下载 免费听mp3音乐 | 北京三友信电子科技有限公司-ETC高速自动栏杆机|ETC机柜|激光车辆轮廓测量仪|嵌入式车道控制器 | CXB船用变压器-JCZ系列制动器-HH101船用铜质开关-上海永上船舶电器厂 | elisa试剂盒价格-酶联免疫试剂盒-猪elisa试剂盒-上海恒远生物科技有限公司 | 集装箱展厅-住人集装箱住宿|建筑|房屋|集装箱售楼处-山东锐嘉科技工程有限公司 | 精密机械零件加工_CNC加工_精密加工_数控车床加工_精密机械加工_机械零部件加工厂 | 西门子伺服控制器维修-伺服驱动放大器-828D数控机床维修-上海涌迪 | 自动化生产线-自动化装配线-直流电机自动化生产线-东莞市慧百自动化有限公司 | 慈溪麦田广告公司,提供慈溪广告设计。 | 蓝莓施肥机,智能施肥机,自动施肥机,水肥一体化项目,水肥一体机厂家,小型施肥机,圣大节水,滴灌施工方案,山东圣大节水科技有限公司官网17864474793 | 磁棒电感生产厂家-电感器厂家-电感定制-贴片功率电感供应商-棒形电感生产厂家-苏州谷景电子有限公司 | 东莞办公家具厂家直销-美鑫【免费3D效果图】全国办公桌/会议桌定制 | 温控器生产厂家-提供温度开关/热保护器定制与批发-惠州市华恺威电子科技有限公司 | 苏州教学设备-化工教学设备-环境工程教学模型|同科教仪 | 铝镁锰板厂家_进口钛锌板_铝镁锰波浪板_铝镁锰墙面板_铝镁锰屋面-杭州军晟金属建筑材料 | 加热制冷恒温循环器-加热制冷循环油浴-杭州庚雨仪器有限公司 | 包装设计公司,产品包装设计|包装制作,包装盒定制厂家-汇包装【官方网站】 | 直读光谱仪,光谱分析仪,手持式光谱仪,碳硫分析仪,创想仪器官网 | 液压油缸-液压站生产厂家-洛阳泰诺液压科技有限公司 | 大倾角皮带机-皮带输送机-螺旋输送机-矿用皮带输送机价格厂家-河南坤威机械 | 企典软件一站式企业管理平台,可私有、本地化部署!在线CRM客户关系管理系统|移动办公OA管理系统|HR人事管理系统|人力 | 合肥抖音SEO网站优化-网站建设-网络推广营销公司-百度爱采购-安徽企匠科技 | 上海阳光泵业制造有限公司 -【官方网站】 | 扬尘在线监测系统_工地噪声扬尘检测仪_扬尘监测系统_贝塔射线扬尘监测设备「风途物联网科技」 | 聚丙烯酰胺_阴离子_阳离子「用量少」巩义亿腾厂家直销,售后无忧 聚合甘油__盐城市飞龙油脂有限公司 | 武汉高低温试验机-现货恒温恒湿试验箱-高低温湿热交变箱价格-湖北高天试验设备 | 油冷式_微型_TDY电动滚筒_外装_外置式电动滚筒厂家-淄博秉泓机械有限公司 | 冷水机,风冷冷水机,水冷冷水机,螺杆冷水机专业制造商-上海祝松机械有限公司 | b2b网站大全,b2b网站排名,找b2b网站就上地球网 | 南京蜂窝纸箱_南京木托盘_南京纸托盘-南京博恒包装有限公司 | 智慧钢琴-电钢琴-便携钢琴-数码钢琴-深圳市特伦斯乐器有限公司 | 湿地保护| 北京租车公司_汽车/客车/班车/大巴车租赁_商务会议/展会用车/旅游大巴出租_北京桐顺创业租车公司 | 高压绝缘垫-红色配电房绝缘垫-绿色高压绝缘地毯-上海苏海电气 | 合肥汽车充电桩_安徽充电桩_电动交流充电桩厂家_安徽科帝新能源科技有限公司 | 上海刑事律师|刑事辩护律师|专业刑事犯罪辩护律师免费咨询-[尤辰荣]金牌上海刑事律师团队 | 上海办公室装修公司_办公室设计_直营办公装修-羚志悦装 | 废旧物资回收公司_广州废旧设备回收_报废设备物资回收-益美工厂设备回收公司 | 哈希余氯测定仪,分光光度计,ph在线监测仪,浊度测定仪,试剂-上海京灿精密机械有限公司 |