技巧2 router-link鼠标切换样式 vue3中.router-link-exact-active失效

#vue3-cli4.5项目技巧1 router-link导航鼠标切换样式 vue3中.router-link-exact-active失效 vue3exact-active-classs失效

vue2用法

我们可以打开链接的样式看一下：

可以看到router-link实际上就是a标签，在style里面给a标签添加普通样式就可以了。

如果我想鼠标点击标签有一个选中状态：

可以观察：router-link有两个class样式，router-link-active, 和router-link-exact-active.

所以，我们可以给router-link加样式：

给router-link加样式 第一种方式

这个类选择器相当于伪类选择器：active,点击变样式。

<style lang="less">

// 给router-link加样式
.router-link-exact-active{
	color:red;
}
</style>

给router-link加样式 第二种方式

<router-link exact-active-class="on">样式</router-link>
<style scoped>
	.on{
     
		color:orangered;