Vue:关于声明式导航中的 跳转、高亮、以及两个类名的定制

声明式导航-导航链接

---

• 实现导航高亮，实现方式其实，css，JavaScript , Vue ,都可以实现。
• 其实关于路由导航，我么可以使用vue-router提供的一个全局组件 router-link（来取代a标签）去实现。

---

router-link的两大特点（能跳转、能高亮）

① router-link 可以跳转，通过配置 to 属性指定路径。其实本质上还是 a 标签（省略#）

<router-link to="/find">发现音乐</router-link>
//上面的等价于下面的
<a href="#/find">发现音乐</a>

渲染后是否等于a标签呢？我们检查元素发现就可以证明：

---

② router-link 可以实现高亮，默认就会高亮类名，可以直接设置高亮的样式

• 当我们点击了任意一个导航：我们都会渲染给router-link组件标签自动的添加类和属性。而其他的则移除

class="router-link-exact-active router-link-active"

此时：我们给我们的router-link组件标签添加一个类名即可

.footer_wrap a.router-link-active {
  background-color: hotpink;
}

• 注意：写法是a.router-link-active，通过a.的方式后面加上提供的类名

---

声明式导航-两个类名

---

通过上面的两大特点的使用，有没有发现一个问题呢？

• 就是我们在设置高亮的时候，，router-link自动添加了两个类名（两个高亮的类名）。

---

①：router-link-active （模糊匹配）

​ 路径后面的都可以匹配到，例如：to="/my" /my/a /my/b 都可以已进行匹配的

②：router-link-exact-active （精确匹配）

​ 路径后面的都不会生效，只会生效当前路径

例如：to="/my" 仅可以匹配/my

• 模糊匹配用的是最多的哈！

---

定制两个高亮类名

---

由于两个类名太长了，我们对它进行个性化定制。

• 方法：
  • 在配置路由规则的配置项中添加两个属性：
    1. linkActiveClass: ‘类名’
    2. linkExactActiveClass： ‘类名’

---

详细的步骤

第一步：

第二步：

在经过上面的处理后，我们可以看到浏览器中渲染出来的类名就是我们定制后的类名了！

---