37 - 使用router-link替代a标签实现高亮

一. 声明式导航 - 导航链接

需求:实现导航高亮效果

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

        (1).  能跳转，配置 to 属性指定路径(必须)。本质还是 a 标，to 无需 #

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

总结:

 1. router-link是什么?
        vue-router提供的全局组件,用于替换 a 标签

2. router-link怎么用?
        <router-link to="/路径值"></router-link>
        必须传入to属性,指定路由路径值

3. router-link好处?
        能跳转，能高亮(自带激活时的类名)

<template>
  <div>
    <div class="footer_wrap">
      <!-- 替换a标签 配置to属性 -->
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>
    <div class="top">
      <!-- 路由出口 -> 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template> 
<script>

export default {
  data() {
    return {

    }
  },
}
</script>
<style>
body{
  margin: 0;
  padding: 0;
}
.footer_wrap{
 position: relative;
 left: 0;
 top: 0;
 display: flex;
 width: 100%;
 text-align: center;
 background-color: #333;
 color: #ccc;
}
.footer_wrap a{
  flex:1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color:#ccc;
  border: 1px solid black;
}
/* router-link标签点击后会增加两个class 值,直接使用即可
   点击那个就增加那个样式 */
.footer_wrap a.router-link-active{
  background-color: purple;
}

.footer_wrap a:hover{
  background-color: #555;
}
</style>

二. 声明式导航 - 两个类名

说明:我们发现 router-link 自动给当前导航添加了 两个高亮类名

1.  router-link-active 模糊匹配(用的多)
        to="/my" 可以匹配 /my /my/a /my/b

2. router-link-exact-active 精确匹配
        to="/my" 仅可以匹配 /my 

总结:

router-link 会自动给当前导航添加两个类名，有什么区别呢?

        router-link-active 模糊匹配(用的多)

        router-link-exact-active 精确匹配

三. 自定义匹配的类名

说明:router-link 的 两个高亮类名 太长了，我们希望能定制怎么办?

const router = new VueRouter({
    routes: [...],
    linkActiveClass : "类名1", // 配置模糊匹配的类名
    linkExactActiveClass: "类名2" // 配置精确匹配的类名
})

 

总结:

 如何自定义 router-link 的 两个高亮类名?
        linkActiveClass 模糊匹配 类名自定义
        linkExactActiveClass 精确匹配 类名自定义