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

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

公司主营业务:网站制作、网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出黄平免费做网站回馈大家。

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默认路由再子路由选中下的选中状态问题-创新互联
    文章源于:http://pwwzsj.com/article/diepeo.html