VueRouter的active-class,exact,exact-active-class三个属性的使用

 <router-link to="/news">唐诗</router-link>
    <router-link to="/news/exact/test" >test唐诗</router-link>
    <router-link to="/" exact>
      导航
    </router-link>
    <router-link to="/news/exact" >exact唐诗</router-link>
    <router-view/>
  1. 当点击 exact唐诗时

    此时自身有两个class属性 自身路径的自己也就是包含的路径有"/"和"/base/new"被赋予一个class属性
    而"/base/news/exact/test"没有class属性 因为他不是点击组件路径的子集
  2. 设置exact属性
    <router-link to="/news" exact>唐诗</router-link>
        <router-link to="/news/exact/test" >test唐诗</router-link>
        <router-link to="/" >
          导航
        </router-link>
        <router-link to="/news/exact" >exact唐诗</router-link>
        <router-view/>


    给唐诗设置属性exact,此时点击exact唐诗的时候 其不会被赋予class属性 
  3. active-class和exact-active-class会修改默认class的名称
Vue Router 中,`router-link-active` 和 `router-link-exact-active` 是两个用于控制导航链接激活状态样式的类名。它们的主要区别在于匹配路由的方式和粒度。 ### `router-link-active` - 该类名会在当前路由 **包含** 链接的路径时被应用。 - 这是一个“部分匹配”机制。如果当前路由是某个父路径下的子路径,则父路径的链接也会被标记为激活状态。 - 适用于需要高亮显示当前所在路径及其父级路径的情况。 例如,当访问 `/user/123` 路径时,如果 `<router-link>` 的 `to` 属性设置为 `/user`,则该链接会被添加 `router-link-active` 类名。 ### `router-link-exact-active` - 该类名仅在当前路由 **完全精确匹配** 链接的路径时才会被应用。 - 这是一种“严格匹配”机制,不会对子路径进行激活。 - 更适合需要只高亮当前具体路径而不想影响其父级路径的场景。 例如,当访问 `/user/123` 路径时,只有当 `<router-link>` 的 `to` 属性也恰好是 `/user/123` 时,该链接才会被添加 `router-link-exact-active` 类名[^1]。 ### 示例代码 ```html <template> <router-link to="/user" active-class="router-link-active" exact-active-class="router-link-exact-active"> User </router-link> </template> <style> .router-link-active { font-weight: bold; } .router-link-exact-active { color: red; } </style> ``` 在此示例中,`/user` 链接在访问 `/user/123` 时将获得 `router-link-active` 样式(加粗),但只有在访问 `/user` 时才会获得 `router-link-exact-active` 样式(红色文本)。 ### 应用场景对比 - 使用 `router-link-active` 可以实现类似侧边栏菜单组展开时,父菜单项保持激活状态的效果。 - 使用 `router-link-exact-active` 则更适合顶部导航栏等需要精准标识当前页面的 UI 组件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值