router-link：导航链接 / 声明式导航

标签：高亮 标签 link active router 导航

vue-router 提供了一个全局组件 router-link（取代 a 标签）

router-link 本质还是 a 标签

router-link 功能：

① 能跳转，配置 to 属性指定路径（必须），本质还是 a 标签，to 无需 #

② 能高亮，默认就会提供 高亮类名，可以直接设置高亮样式

 

router-link 会自动给当前导航添加两个类名：router-link-active（模糊匹配，用的比较多）、router-link-exact-active（精确匹配）

 

代码演示：

修改前：

      <a   href = " #/find " > 发现音乐 </a>

      <a   href = " #/my " > 我的音乐 </a>

修改后：

      <router-link   to = " /find " > 发现音乐 </router-link>

      <router-link   to = " /my " > 我的音乐 </router-link>

 

在 style 标签里给 router-link 设置导航高亮：

<style> a.router-link-active {   background-color: #bfd7e1; } </style> 或者（推荐用上一个） <style> a.router-link-exact-active {   background-color: #bfd7e1; } </style>  

标签：高亮,标签,link,active,router,导航
From： https://www.cnblogs.com/gagaya2/p/17757007.html