前言：
基础的router-link的使用
<router-link to="/"> 待办事项
</router-link>
<router-link to="/compelete"> 完成
</router-link>
<router-link to="/delete"> 已删除
</router-link>
如下图可知： 基础的router-link 实现了为当前所在路由添加active类 （router-link-active router-link-exact-active）
**
那么这里引出问题：在vue3中 一个自定义标签的router-link 如何实现高亮（添加active类 ）
**
vue3 router-link 自定义target:
<router-link to="/" custom v-slot="{ navigate }">
<span @click="navigate"> 待办事项 </span>
</router-link>
<router-link to="/compelete" custom v-slot="{ navigate }">
<span @click="navigate"> 完成 {
{
isExactActive}} </span>
</router-link>
<router-link to="/delete" custom v-slot="{ navigate }">
<span @click="navigate"> 已删除 {
{
isExactActive}} </span>
</router-link>
如下图可知：自定义target 后， 标签 确实 变为了自定义的 标签，但是没有自动添加高亮类
实现原理：
router-link 通过一个作用域插槽暴露底层的定制能力。
href：解析后的 URL。将会作为一个 <a> 元素的 href 属性。如果什么都没提供，则它会包含 base。
route：解析后的规范化的地址。
navigate：触发导航的函数。 会在必要时自动阻止事件，和 router-link 一样。例如：ctrl 或者 cmd + 点击仍然会被 navigate 忽略。
isActive：如果需要应用 active class，则为 true。允许应用一个任意的 class。
isExactActive：如果需要应用 exact active class，则为 true。允许应用一个任意的 class。
即通过 v-slot 解构赋值 的 isActive 和 isExactActive 属性来实现
注意：
a.这里不能通过解构的 route.path 来实现，因为是解析后的规范化的地址，并不能判断是否是当前route
b. 需要确保 /path 是在router中注册了 是可以匹配到的 ，否则不生效
实现：
<router-link to="/" custom v-slot="{ navigate ,isActive , isExactActive}">
<span :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']" @click="navigate"> 待办事项 </span>
</router-link>
<router-link to="/compelete" custom v-slot="{ navigate,isActive,isExactActive}">
<span :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']" @click="navigate"> 完成 {
{
isExactActive}} </span>
</router-link>
<router-link to="/delete" custom v-slot="{ navigate,isActive,isExactActive}">
<span :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']" @click="navigate"> 已删除 {
{
isExactActive}} </span>
</router-link>
成功添加动态类！ 这里的类名是可以自定义的。
然而，目前对 isActive ，isExactActive 的区别仍不太了解，为此，我们举例说明：
子路由组件情况：
我们在 已删除路由 （/delete） 下 添加子路由
然后去访问这个子路由： /delete/deleteone
如下图可知：成功访问到子路由！
高亮类： router-link-active 保留 router-link-exact-active 删除
得出结论：
匹配到子路由时， isActive 为 true , isExactActive (精确) 为false