active-class 属于vue-router的样式方法,当router-link标签被点击时将会应用这个样式
API参考地址:API 参考 | Vue Router (vuejs.org)
active-class#
-
类型:
string
-
默认值:
"router-link-active"
(或者全局 linkActiveClass) -
详细内容:
链接激活时,应用于渲染的
<a>
的 class。
一、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" active-class="active">我的</router-link>
</div>
二、会产生的问题
因为 to="/" 引起的,active-class 选择样式时根据路由中的路径去匹配,然后显示。
例如在 my 页面中,路由为 localhost:8081/#/my,那么 to="/”和 to="/my"都可以匹配到,所以都会激活选中样式
三、解决方法
1. 在 router-link 中写入 exact
<router-link to="/" class="menu-home" active-class="active" exact>首页</router-link>
2. 在路由中加入重定向
<router-link to="/" class="menu-home" active-class="active" exact>首页</router-link>
{path: '/', redirect: '/home' }