vue-cli 默认路由再子路由选中下的选中状态问题及解决代码

 更新时间:2018年09月06日 10:20:57   作者:LHangY  
这篇文章主要介绍了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)
},

这路由一看没问题吧!

<router-link to="/"><p>首页</p></router-link>//这是底部的切换路由
//下面两个便是首页下面的两个子路由的跳转了
<li><router-link to="/">热门</router-link></li>
<li><router-link to="/livenew">最新</router-link></li>

看到上面的代码是不是没有发现错误?其实也的确可以运行!而且两个子路由切换关于首页的状态也是没有问题的!

但是当我切换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)
 }

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

<router-link to="/index"><p>首页</p></router-link>//这里依旧是底部导航
//这里便是首页的两个子路由的跳转按钮了
<li><router-link to="/index/livelist">热门</router-link></li>
<li><router-link to="/index/livenew">最新</router-link></li>

构思 :用重定向,规定默认路由跳转到上面  /index 下面默认的子路由,再由默认的子路由去定向到子路由的  livelist 。(这是在解决问题的时候发现,非默认路由下,子路由切换不会造成默认路由选中不取消的问题,而默认路由一直会存在一个 router-link-active的类名,我的选中样式也是基于它的 )

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

总结

以上所述是小编给大家介绍的vue-cli 默认路由再子路由选中下的选中状态问题及解决代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vant 解决tab切换插件标题样式自定义的问题

    vant 解决tab切换插件标题样式自定义的问题

    这篇文章主要介绍了vant 解决tab切换插件标题样式自定义的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 在vue中利用全局路由钩子给url统一添加公共参数的例子

    在vue中利用全局路由钩子给url统一添加公共参数的例子

    今天小编就为大家分享一篇在vue中利用全局路由钩子给url统一添加公共参数的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue中mixins混入的介绍和使用详解

    Vue中mixins混入的介绍和使用详解

    mixins(混入)是一种分发 Vue 组件中可复用功能的非常灵活的方式,这篇文章主要为大家介绍了mixins混入的介绍和使用,需要的可以参考下
    2023-08-08
  • 一文弄懂Vite 配置文件

    一文弄懂Vite 配置文件

    Vite 构建环境分为开发环境和生产环境,不同环境会有不同的构建策略,本文就来介绍下Vite 配置文件,具有一定的参考价值,感兴趣的可以了解一下
    2024-08-08
  • uni-app中vue3表单校验失败的问题及解决方法

    uni-app中vue3表单校验失败的问题及解决方法

    最近遇到这样的问题在app中使用uni-forms表单,并添加校验规则,问题是即使输入内容,表单校验依然失败,本文给大家分享uni-app中vue3表单校验失败的问题及解决方法,感兴趣的朋友一起看看吧
    2023-12-12
  • 一篇文章带你吃透Vuex3的状态管理

    一篇文章带你吃透Vuex3的状态管理

    Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于如何通过一篇文章带你吃透Vuex3的状态管理,需要的朋友可以参考下
    2022-07-07
  • Vue自定义实现一个消息通知组件

    Vue自定义实现一个消息通知组件

    这篇文章主要为大家详细介绍了如何利用Vue自定义实现一个消息通知组件,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下
    2024-03-03
  • 如何用vue封装axios请求

    如何用vue封装axios请求

    对axios进行封装以及将API接口按业务模块统一管理,有助于我们简化代码,方便后期维护。本文介绍了如何用vue封装axios请求,感兴趣的同学,可以参考下。
    2021-06-06
  • 在vue中v-bind使用三目运算符绑定class的实例

    在vue中v-bind使用三目运算符绑定class的实例

    今天小编就为大家分享一篇在vue中v-bind使用三目运算符绑定class的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue中v-bind和v-model的区别详解

    vue中v-bind和v-model的区别详解

    v-bind和v-model是Vue.js中的两个常用指令,它们在功能和用途上有一些区别,接下来小编就给大家具有讲讲vue中v-bind和v-model区别,感兴趣的同学跟着小编一起来看看吧
    2023-08-08

最新评论