在路由中配置linkActiveClass属性
export default new Router({
routes: [
{
path: '/',
name: 'HolleWorld',
component: HolleWorld
}
],
linkActiveClass: 'active' // active为路由激活时动态添加的类,类名可以自定义
})
<router-link to="/">首页</router-link>
给router-link标签设置active样式
a{
font-size: 14px
color:red //没有被点击显示红色
&.active{
color:blue //被点击后显示蓝色
}
}
还有一种更简单的方法,不用配置路由里的属性,可以直接在标签中加
<router-link to="/" active-class="active">首页</router-link>
本文介绍如何在Vue Router中使用linkActiveClass属性来定制激活路由链接的样式。通过在路由器实例中设置linkActiveClass属性,或者直接在<router-link>组件上使用active-class属性,可以轻松实现路由激活状态的视觉效果。
1149

被折叠的 条评论
为什么被折叠?



