vue使用router-link做导航栏跳转遇到的Bug

遇到的问题:点击导航按钮时,点击第一次没有选中状态,需要点击第二次才能选中状态。 测试过程: vue使用router-link做导航栏跳转遇到的Bug
文章图片

控制台打印
vue使用router-link做导航栏跳转遇到的Bug
文章图片

获取缓存,在控制台打印导航栏index,初始化为undefined。
点击第一次控制台打印,但是获取index缓存之后,代码自动重复执行了一次打印,index的值恢复回undefined,状态未选中
vue使用router-link做导航栏跳转遇到的Bug
文章图片

vue使用router-link做导航栏跳转遇到的Bug
文章图片

点击第二次控制台打印,获取index缓存,代码不执行重复打印,状态选中
vue使用router-link做导航栏跳转遇到的Bug
文章图片

vue使用router-link做导航栏跳转遇到的Bug
文章图片

解决问题: 【vue使用router-link做导航栏跳转遇到的Bug】只需添加router-link-active样式

.router-link-active { background: #848484; }

代码:
在ronter-link中添加 exact属性解决首页一直默认激活

vue使用router-link做导航栏跳转遇到的Bug
文章图片

#head-nav a是在多个router-link时起定位的作用
#head-nav a.router-link-active { background: #0172ea; }

参考原文地址:
https://www.jianshu.com/p/eca...
https://blog.csdn.net/mylover...
https://www.cnblogs.com/lisiy...
https://blog.csdn.net/version...
https://blog.csdn.net/x_xiNan...
https://www.jianshu.com/p/d9a...
https://segmentfault.com/q/10...
https://blog.csdn.net/qq_4223...

    推荐阅读