看完必会router-link标签的激活样式

router-link标签的激活样式

vue给导航添加激活样式及其简单，但是若不清楚基本的属性也会出现很多bug

属性	说明	默认值
exact	是否开启精准匹配模式	false
active-class	nav激活样式

这两个属性就是我们写routerlink激活样式需要的属性。

exact：默认是false，也就是不开启精准匹配模式，例如：当url为“/”的时候，所有的导航栏都会有激活样式

active-class：就是导航栏激活之后的样式.

重点：router-link标签，默认渲染出来是<a></a>标签 。而a标签是联级元素，我们知道联级元素的宽、高、背景颜色等是无法直接修改的（这里让我排查了好久）。所以如果我们想要激活样式可以修改背景颜色，就需要将渲染出来的a标签变成块元素 ----就是给其添加display: block 这样激活样式里面的背景颜色就可以生效了

<template>
    <router-link
             exact  
             active-class="active"
             class="normal"
             :to="{}"
             ></router-link>
</template>
<style>
.normal{
  display: block;
  color: black;
}

.normal :hover{
  background-color: rgb(221,219,218);
}
.normal :active{
  color: black;
}
.active {
  background-color: rgb(195, 192, 190);
}
</style>

需求：当某个标签被激活后，鼠标再放上去之后就不会有:hover的样式 。如果代码像上面这样就无法达到这个效果

于是我就有一个想法，就是将.active的背景颜色使用!important修饰，这样hover的样式没有active层级高了。虽然这个想法很美好，但是现实很骨感。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8MIAuq37-1652281613909)(C:\Users\li’wen’jie\AppData\Roaming\Typora\typora-user-images\image-20220511132800190.png)]

这是效果：p1这样图admin1是激活状态， p2 ：鼠标悬浮再admin2上，也就是hover是红色背景 ; p3：鼠标悬浮在admin1上。

这样并没有满足我们的需求，随后我仔细想想，加!important的思路没有错啊，经过我很多次尝试之后发现是hover那里多了一个空格导致的。

对比

未满足需求的hover：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TwisxX4i-1652281613911)(C:\Users\li’wen’jie\AppData\Roaming\Typora\typora-user-images\image-20220511133324735.png)]

将这个多余的空格去掉之后:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rRZBtKPC-1652281613913)(C:\Users\li’wen’jie\AppData\Roaming\Typora\typora-user-images\image-20220511133416933.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dvE6CSud-1652281613914)(C:\Users\li’wen’jie\AppData\Roaming\Typora\typora-user-images\image-20220511133431353.png)]

鼠标的是悬浮在admin1上的，可以看出红色hover的样式没有了，就是将:hover前面的空格去掉了，这样就满足我们的需求了

希望这些小细节不耽误大家下班的时间！ 大家给个关注、点个赞再走呗！

---