第三十四章 Vue路由进阶之声明式导航（导航高亮）

一、导航高亮

[1.1. 基于语法](#1.1. 基于语法)

[1.2. 主要代码](#1.2. 主要代码)

二、声明式导航的两个类名

[2.1. 声明式导航类名匹配方式](#2.1. 声明式导航类名匹配方式)

[2.2. 声明式导航类名样式自定义](#2.2. 声明式导航类名样式自定义)

[2.3. 核心代码](#2.3. 核心代码)

一、导航高亮

1.1. 基于语法

在Vue中通过VueRouter插件，我们可以非常简单的实现实现导航高亮效果
VueRouter 提供了一个全局组件 router-link (取代 a 标签)

① 能跳转，配置 to 属性指定路径(必须) 。

，但是to标签中填写的路径无需 #

a标签的写法：

router-link写法：

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

我们通过开发者工具可以看到，router-link的本质还是 a 标签

1.2. 主要代码

html 复制代码

<template>
  <div>
    <div class="footer_wrap">
      <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 {};
</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;
}
.footer_wrap a:hover {
  background-color: #555;
}
</style>

二、声明式导航的两个类名

2.1. 声明式导航类名匹配方式

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

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

to="/my" 可以匹配 /my /my/a /my/b ....

② router-link-exact-active 精确匹配

to="/my" 仅可以匹配 /my

2.2. 声明式导航类名样式自定义

我们已经看到router-link默认给我们添加了两个高亮类名，所以我们可以通过修改这两个类名的样式属性，来自定义修改高亮的颜色及其他样式效果：

2.3. 核心代码

其余代码不变，照搬前面的即可

App.vue

html 复制代码

<template>
  <div>
    <div class="footer_wrap">
      <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 {};
</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;
}
.footer_wrap a.router-link-active {
  background-color: purple;
}
.footer_wrap a:hover {
  background-color: #555;
}
</style>