技巧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;
		text-decoration: none;
	}
</style>

在vue3中使用失效

vue3中按上述做，router-link并不能变样式，并且还是官方的绿色样式，显然在vue3中这个属性已经不适用了。
因为在vue2中 router-link-active 本就不是精确匹配，只要路由路径包含router-link组件的to属性值，就可以在链接激活时设置CSS类名，而vue3不是这样，router4已经改变。

vue3的router-link样式方法

共有三步：按照我的代码标注走。

<template>
	<div>
		<!-- 1.router-link里面一定要写成 文字和router-link隔着一个标签 -->
		 <router-link to="/" exact><span>首页</span></router-link>
		 <router-link to="/goodscate"><span>分类</span></router-link>
		 <router-link to="/mycart"><span>购物车</span></router-link>
		 <router-link to="/userhome" ><span>我的</span></router-link>
	</div>	
</template>

<script>
	export default {
	  name: 'footer1',
	  data() {
	    return {
			
	    }
	  },   
	}
</script>
<style scoped>
	/* 3.router-link内部样式是由这个指定的active决定的  */
	/* 它下面的span标签是给文字换鼠标点击样式颜色的 */
	.active span{
	    color: #0984e3;
	}
</style>

找到项目的router/index.js

const router = createRouter({
// 2. 满足vue3的router-link样式的第二步，active为class名
  linkActiveClass: 'active',
  history: createWebHistory(process.env.BASE_URL),
  routes
})

效果：

鼠标点击两张图片切换状态 图片+文字切换

鼠标点击两张图片的切换状态