vue-router里面的linkActiveClass用法

最新推荐文章于 2025-03-22 15:16:33 发布

Dev _

最新推荐文章于 2025-03-22 15:16:33 发布

阅读量1.3k

点赞数 1

分类专栏： vue-router

原文链接：https://blog.csdn.net/cofecode/article/details/80663259

版权

Vue Router activeClass 路由元信息导航栏 CSS样式

关键词由CSDN通过智能技术生成

vue-router 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何在Vue Router中控制导航栏选中状态的背景色，通过设置linkActiveClass和CSS样式实现高亮。同时，解决在路由变化时侧边栏的activeClass丢失问题，通过添加路由元信息并动态判断来保持特定页面的active状态。此外，还提供了解决方案，当有多个页面共享同一activeClass时的处理办法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每次路由切换成功进入激活状态

在点击导航栏的时候，让被点击的那一个有背景色，其他的没有背景色？

如何做？

在路由里面设置 linkActiveClass: ‘is-active’,

const router = new VueRouter({
    routes,
    linkActiveClass: 'is-active'
});

然后在css里面设置

.is-active{
    background:red;
}

权重不够高没有显示可以加父元素增加权重

这样被点击激活的时候就会被加上is-active这个class了。注意如果没有设置router-link的标签类型，会是<a>标签,<a>标签是没有宽度和高度的。那么我们需要设置成div。然后才会背景颜色的变化。

<router-link to='index' tag="li" event="mouseover">

将router-link 这样的a标签转化为li标签

这样 activeClass 就会根据路由的变化而动态添加了。

这里还会遇到一个问题。

比如我这里有个侧边导航栏，其中有一项是我的钱包，路由配置为’/myWallet’,从’/myWallet’页面可以操作提现，会进入’/withdraw’提现页面，此时，路由发生变化，activeClass将随着路由的变化，从’/myWallet’ 身上移到’/withdraw’上了，侧边栏的active Class 不再了。

如何在’/myWallet’ 页面，也要 ‘/myWallet’ 这个页面的active Class 保留住呢？

或者说，我们可以自己来操控 active Class 给加的位置，并不想它随着路由的改变而改变。

这里，去掉router 文件夹下 index.js 里面的linkActiveClass: ‘is-active’ 的配置，不去使用这个属性。

解决思路：给’/withdraw’ 加上一个路由元信息，在侧边栏去检查路由元信息，然后看是否需要给其active class

{
  path: '/myWallet',
  name: 'MyWallet',
  component: MyWallet,
  meta: { 
    requiresAuth: true,
    active: '/MyWallet'
  }
},
{
  path: '/withdraw',
  name: 'Withdraw',
  component: withdraw,
  meta: { 
    requiresAuth: true ,
    active: '/MyWallet'
  }
},

例如

<router-link tag="li" class="li-item" to="/MyWallet" :class="{'is-active':$route.meta.active === '/MyWallet'}">我的钱包</router-link>

在侧边栏的时候，会取到当前路由的this.$route.meta.active 然后跟’/MyWallet’进行判断。

这样就实现了在提现或者转账的页面的class active 会给到侧边栏的我的钱包身上。

当然，如果只有一个页面对应一个active的

就不用添加 meta下面的active属性了

<router-link tag="li" class="li-item" to="/userinfo" 
:class="{'is-active':$route.path === '/userinfo'}">{{ $t("sidebar.PersonalInformation") }}
</router-link>

只需要拿到当前的路由地址进行判断就ok
————————————————
版权声明：本文为CSDN博主「cofecode」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/cofecode/article/details/80663259