首页 > 其他 > 详细

导航遍历并激活当前样式的方法

时间:2021-03-23 21:47:38      阅读:41      评论:0      收藏:0      [点我收藏+]
效果图:
技术分享图片

路由配置:
技术分享图片

方法一:通过props属性传参,判断当前路由是否跟props参数相同

导航公共组件Header.vue

技术分享图片

技术分享图片

首页(父组件):
技术分享图片

列表页(父组件):
技术分享图片

。。。(以此类推)

方法二:通过获取当前路由

技术分享图片

技术分享图片

方法三:$route.name.indexOf(val) == -1

技术分享图片

方法四:在主入口文件App.vue的style中设置

.router-link-active{
    color:red;
}

方法五:在总路由js文件中设置linkActiveClass

1、在总路由js文件中,和routes同级
技术分享图片

2、在主入口文件App.vue的style中设置

.xx{
    color:red;
}

导航遍历并激活当前样式的方法

原文:https://blog.51cto.com/15142266/2669313

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!