【Vue实现导航高亮】使用router-link替代a标签实现高亮

【Vue】使用router-link替代a标签实现高亮

前言

我们经常遇到下面的场景，导航栏中点击过的a（比如“我的音乐”），显示高亮效果，如果使用js实现，则需要将点击的a标签的类名添加一个高亮类名。其实原理类似，只不过vue帮我们封装了 router-link 标签。

注意：前提是vue工程中 确认已安装Vue-Router包 。如不会，则参考https://blog.csdn.net/qiaoermeng/article/details/141470548?spm=1001.2014.3001.5501中的 VueRouter的使用步骤 部分，本章节的代码是基于该篇博客进行进一步修改的，源代码亦是如此。

一、使用router-link标签代替a

router-link 提供了一个全局组件 router-link (取代 a 标签) ：

• 能跳转，配置 to 属性 指定路径(必须) 。本质还是 a 标签 ，to 里面无需 # ；
• 能高亮，默认就会提供 高亮类名 ，可以直接设置高亮样式。
  

二、查看新加的高