active-class 属于哪个组件中的属性？该如何使用？

最新推荐文章于 2024-08-02 17:03:03 发布

御键飞行

最新推荐文章于 2024-08-02 17:03:03 发布

阅读量4.3k

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/zj695133626/article/details/121189145

版权

active-class是vue-router的router-link组件属性，用于设定选中状态的样式。本文介绍了两种使用方法：在router-link中设置active-class，以及在路由js文件中配置linkActiveClass。同时，针对因to="/"导致的样式匹配问题，提出了通过在router-link中使用exact属性或在路由中添加重定向作为解决方案。

摘要由CSDN通过智能技术生成

active-class是 vue-router模块中 router-link 组件中的属性，主要作用是用来实现选中
样式的切换。

一、active-class 的使用方式

在 vue-router 中使用 active-class 有两种方式:

1. 在 router-link 中写入 active-class

active-class 选择样式时根据路由中的路径（to=“/home”）去匹配，然后显示

<router-link to="/home" class="menu-home" active-class="active">首页</router-link>

2. 直接在路由 js 文件中配置 linkActiveClass

export default new Router({
	linkActiveClass: 'active',
})

<div class="menu-btn">
	<router-link to="/" class="menu-home" active-class="active">首页</router-link>
</div>
<div class="menu-btn">
	<router-link to="/my" class="menu-my" act