在路由中配置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>

 

Logo

前往低代码交流专区

更多推荐