如何解决vue-cli默认路由再子路由选中下的选中状态问题

小编给大家分享一下如何解决vue-cli 默认路由再子路由选中下的选中状态问题,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

周至网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、自适应网站建设等网站项目制作,到程序开发,运营维护。创新互联于2013年创立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联

vue-cli是Vue.js官方脚手架命令行工具,我们可以用它快速搭建Vue.js项目,vue-cli最主要的功能就是初始化项目,既可以使用官方模板,也可以使用自定义模板生成项目,而且从2.8.0版本开始,vue-cli新增了build命令,能让你零配置启动一个Vue.js应用。

因项目需求,需要在默认路由下面的两个子路由进行切换,当开始以为不就是路由切换?so easy!就看一下遇到的问题吧!

{path: '/',component: resolve => require(['@/components/LiveList'],resolve),
  children:[
  {
  path:'',
  name:'livelist',
  meta:{title:'',index:0},
  component: resolve => require(['@/components/compts/livelistcom'],resolve)
  },{
  path:'livenew',
  name:'livenew',
  meta:{title:'',index:1},
  component: resolve => require(['@/components/compts/livelistnew'],resolve)
  }]
 },
{
 path:'/user',
 name:'user',
 meta:{title:'用户',index:4},
 component: resolve => require(['@/components/user'],resolve)
},

这路由一看没问题吧!

首页

//这是底部的切换路由 //下面两个便是首页下面的两个子路由的跳转了
  • 热门
  • 最新
  • 看到上面的代码是不是没有发现错误?其实也的确可以运行!而且两个子路由切换关于首页的状态也是没有问题的!

    但是当我切换user路由的时候发现,首页路由的状态依旧是选中状态 ,这个让我很纳闷,按理说user路由跟首页的路由是同级,不出出现这样的问题。既然出现了,为了工作,只能迎难而上,去解决这个问题。

    在经过我仔细的查找文档,终于想到了一种解决方案:在官方文档里面有一个 redirect (重定向) router.vuejs.org/zh/guide/es… 点击链接可以查看官方文档

    既然可以重定向那我就试一下这种来解决(毕竟上面的代码和逻辑事再想不出是什么地方出的错误,还望大神指点一二!!!)

    废话不多说,直接先解决后的代码:

    {path:'',redirect: '/index'},
     {path: '/index',component: resolve => require(['@/components/LiveList'],resolve),
      children:[
      {path:'',redirect:'livelist'},
      {
      path:'livelist',
      name:'livelist',
      meta:{title:'',index:0},
      component: resolve => require(['@/components/compts/livelistcom'],resolve)
      },{
      path:'livenew',
      name:'livenew',
      meta:{title:'',index:1},
      component: resolve => require(['@/components/compts/livelistnew'],resolve)
      }]
     },
     {
      path:'/user',
      name:'user',
      meta:{title:'用户',index:4},
      component: resolve => require(['@/components/user'],resolve)
     }

    而关于路由的跳转也有一些小变化:

    首页

    //这里依旧是底部导航 //这里便是首页的两个子路由的跳转按钮了
  • 热门
  • 最新
  • 构思 :用重定向,规定默认路由跳转到上面  /index 下面默认的子路由,再由默认的子路由去定向到子路由的  livelist 。(这是在解决问题的时候发现,非默认路由下,子路由切换不会造成默认路由选中不取消的问题,而默认路由一直会存在一个 router-link-active的类名,我的选中样式也是基于它的 )

    关于选中时自定义自己的样式可以操作.router-link-active 这个类,而默认路由一直存在这个类,如果没有子路由,或者子路由选中不需要显示父路由也为选中状态的情况下,你可以操作.router-link-exact-active这个类来写自己的选中样式。

    看完了这篇文章,相信你对“如何解决vue-cli 默认路由再子路由选中下的选中状态问题”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


    网站题目:如何解决vue-cli默认路由再子路由选中下的选中状态问题
    标题URL:http://myzitong.com/article/ieosgc.html