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

在项目中，想让路由后缀为空，或者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就不正常了

我们看下后台返回数据也是正常的有路由名字，这就很惆怅了。

然后我们看下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>

改成这样只会就发现一切正常了

所以总结一下：

当使用动态路由匹配的时候，再想通过name去跳转是会有问题的。当你想用路由name去跳转的时候，就不要使用动态路由匹配，需要传参数，就使用params去传递参数。

以上这篇解决vue路由name同名,路由重复的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue路由

    前端路由和后端路由: 后端路由:对于普通的网站,所有的超链接都是url地址,所有url都对应服务器上对应的资源 前端路由:对于单页面应用程序来说,主要通过url的hash(#)来实现不同页面的切换,同时hash还有一个特点HTTP请求中不会包含hash相关的内容,所以单页面程序中的页面跳转主要用hash实现 在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由 路由的使用 1.创建一个路由对象,当导入vue-router包之后,在window全局对象中就有一个路由的构造函

  • vue 解决addRoutes多次添加路由重复的操作

    我就废话不多说了,大家还是直接看代码吧~ import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const createRouter = () => new Router({ mode: 'history', routes: [] }) const router = createRouter() export function resetRouter () { const newRouter = createR

  • vue组件name的作用小结

    vue组件name的作用小结

    我们在写vue项目的时候会遇到给组件命名 这里的name非必选项,看起来好像没啥用处,但是实际上这里用处还挺多的 export default { name:'xxx' } 1.当项目使用keep-alive时,可搭配组件name进行缓存过滤 举个例子: 我们有个组件命名为detail,其中dom加载完毕后我们在钩子函数mounted中进行数据加载 export default { name:'Detail' }, mounted(){ this.getInfo(); }, methods:{

  • 详解vue 路由跳转四种方式 (带参数)

    1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

  • 解决vue addRoutes不生效问题

    动态添加导航栏时,addRoutes不生效解觉 1.在addroutes前,使用router.options.routes=XXXXX的方法手动添加 2.使用作者的方法,在store里维护一个routes对象,然后使用这个对象遍历生成侧面导航栏 补充知识:vue-router 动态添加路由 router.addRoutes(routes)遇到的二次登陆路由冲突问题解决 起因 在当前项目中使用的iview-admin,路由要根据权限动态生成,是在登录后获取当前用户权限内的路由使用 vue-rout

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

    在项目中,想让路由后缀为空,或者index的时候,都跳转到路由为index的页面,于是在router中如下配置 routes: [{ path: '/', name: 'index', component: () => import('@/components/index').then(m => m.default) },{ path: '/index', name: 'index', component: () => import('@/components/index').then(

  • 解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题

    问题: 从第一个页面跳转到第二个页面后,如果停留在第二个页面,定时器还在运行.如果在两个页面之间来回跳转,跳转时间小于定时器的间隔时间时,也会出现重复创建setTimeout的情况. 原因: 当我们刷新页面时,会将当前页面之前创建的setTimeout以及其他定时器都清除掉,但是仅仅是路由切换是不会清除的. data () { return { ct: null } }, methods: { start() { this.ct= setTimeout( () => {that.countdow

  • 解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

    bus总线是vue中路由跳转传递数据的常用方法,适用于传递数据不多的情况,但是在使用的过程中发现,bus总线在第一次路由跳转的时候总是不能够成功传递需要传递的数据.检查bus的配置以及调用方法,均没有出错,错就错在没有理解Vue的生命周期!!! 我们知道bus的$on的监听应该位于$emit之前,如果在emit之前没有创建监听事件,那么肯定是得不到需要的数据.因此,我通过两个页面来了解路由跳转时两个页面的生命周期,下面给出其中一个页面的部分代码: //页面1 beforeCreate () {

  • Vue + Vue-router 同名路由切换数据不更新的方法

    在默认情况下, 同名路由之间的切换, 由于组件可以服用, 放在ready里获取数据, 是不会执行的, 有两种方法可以解决 注意: 该问题仅存在于 vue1 方法1: 将数据获取放到route.data下~ route: { data({to: {params: { page }}}) { return Promise.all([ this.getApi() ]).then(() => { }) } } 方法2: 设置route.canReuse = false, 强制组件不复用~ route:

  • 解决vue 路由变化页面数据不刷新的问题

    每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我遇到同样问题的人. 问题描述:通过调接口,动态显示帮助页面的问题列表, 问题列表有多级,当点击的这个问题没有下一级问题的时候跳入内容页. 问题出在,我在电脑上做移动端页面的时候,相继跳到详情页,我想返回,点击 按钮,直接跳转到了如上第一张图的样子,no,no,no,这不是我想要的结果,此刻,想到了通过改变url来改变页面的层级问题. 一级的parent为0,默认不显示或显示. 二级的parent为1,点击一级路由变为如图: 点击进入

  • 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部. 最开始我使用了一个很笨的方法,每个页面上都加上window.scrollTop(0,0);来解决问题,但是这个太繁琐了.最后和小伙伴们商量了一下,在main.js页面上加了这么一段代码 router.afterEach(function (to) { window.scrollTo(0, 0) }) 路由跳

  • 解决vue多个路由共用一个页面的问题

    在日常的vue开发中我们可能会遇见多个路由需要共用一个页面的需求,特别是当路由是通过动态添加的,不同的路由展示的东西只是数据不同其他没有变化.例如: let routes = [ {path:"/zhanshan", components:Person, }, {path:"/lisi", components:Person, }, {path:"/wangwu", components:Person, } ] 这种情况的时候,我们发现,其实我们

  • vue地址栏直接输入路由无效问题的解决

    vue 项目只要不是静态页面,一般都会和官方的路由管理器 vue-router 一起使用. 最近项目有一个需求,是在地址栏输入路由,跳转到对应路由组件,在开发环境中这样做是可以跳转的,但是项目打包后,通过地址栏跳转会报错. 因为 vue 在页面上显示哪个组件是根据 vue-router 进行控制的,在地址栏上直接输入路由名称,并不能触发 vue-router 的规则,所以只能通过监听地址的改变,利用回调函数在组件内部进行动态修改路由. 方式一:history 模式 vue-router 默认是

  • 解决vue路由后界面没有变化,但是链接有的问题

    vue有个写法需要注意: 如果是跳转到默认首页,router-link 应该写: to: "{path: ' / ' } " 如果跳转到非默认首页的时候,router-link 应该写: to: "{path: ' about ' } " 就是除了跳转到默认首页的情况下,其他的都要去掉开始的斜杠 / ,是个坑,我踩了,祝你好运! 以上这篇解决vue路由后界面没有变化,但是链接有的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

随机推荐