效果图：

路由配置：

方法一：通过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;}

©著作权归作者所有：来自51CTO博客作者wx605879fdc8dae的原创作品，如需转载，请注明出处，否则将追究法律责任

更多相关文章

1. 路由中$route 和 $router 的区别
2. mysql数据库常见报错及解决方法
3. Python代码运行速度慢?这五种方法很管用
4. 一文详解RIP路由协议及环路问题！
5. Mybatis【2.1】-- 从读取流到创建SqlSession发生了什么？
6. MySQL修改root密码的多种方法+给远程登录赋权
7. chrome查看网站字符集编码的方法（不需要安装charset）
8. Eclipse导入MyEclipse项目时，无法识别为web项目的解决方法
9. Linux下查看进程线程数的方法

随机推荐

1. 在java中对Unicode的字符比U+FFFF多吗?
2. java 关于单用户登录session问题，在线人数
3. java里如何取出一个字符串中的数字？
4. Java之Spring Cloud概念介绍(非原创)
5. java 中 写 json 小知识
6. Intellij IDEA和JavaFX工件构建不会生成E
7. Java NIO- Selector 使用示例
8. 用 Java 模拟 UDP 传输的发送端和接收端
9. Java Quartz的使用方法，实现程序计时
10. 环境变量在cron中看不到