解决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 相关文章推荐
js 单击式的下拉菜单效果实例
Aug 13 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
vue如何引用其他组件(css和js)
Apr 13 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
JavaScript实现滑块验证解锁
Jan 07 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
php生成excel列序号代码实例
2013/12/24 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
在Python的循环体中使用else语句的方法
2015/03/30 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
python实现日志按天分割
2019/07/22 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
六月份红领巾广播稿
2014/02/03 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
优质服务口号
2014/06/11 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
社区党建工作总结2015
2015/05/13 职场文书
2019大学生实习报告
2019/06/21 职场文书