解决vue路由name同名,路由重复的问题


Posted in Javascript onAugust 05, 2020

在项目中,想让路由后缀为空,或者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-class="messagePopper"
     placement="bottom"
     width="300"
     v-model="visiblity"
     trigger="click">
     <div class="messageBox">
      <div class="title">通知</div>
      <div class="message" v-if="messageData.length === 0">暂无通知</div>
      <div v-else>
      <div class="message" 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" class="item" :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同名,路由重复的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
慎用 somefunction.prototype 分析
Jun 02 Javascript
ExtJS 入门
Oct 29 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
vue中的scope使用详解
Oct 29 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 #Javascript
Vue 同步异步存值取值实现案例
Aug 05 #Javascript
详解vue路由
Aug 05 #Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 #Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 #Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 #Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 #Javascript
You might like
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
php生成图片缩略图的方法
2015/04/07 PHP
php实现倒计时效果
2015/12/19 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
VUE实现图片验证码功能
2020/11/18 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
小班秋游活动方案
2014/02/22 职场文书
工地安全生产标语
2014/06/06 职场文书
质量保证书
2015/01/17 职场文书
小学教师节活动总结
2015/03/20 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书