前言:
基础的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