解决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 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
js获取提交的字符串的字节数
Feb 09 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
解决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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
PHP中用hash实现的数组
2011/07/17 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python中使用mysql数据库详细介绍
2015/03/27 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
Python异常处理例题整理
2019/07/07 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
WxPython实现无边框界面
2019/11/18 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
python matlab库简单用法讲解
2020/12/31 Python
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
opencv实现图像几何变换
2021/03/24 Python
公证委托书
2014/08/01 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python