vue active-class的用法

1.active-class的作用

active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；

2.在vue-router中要使用active-class有两种方法：

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

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

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

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

3.如果使用第二种方法添加active-class，跳转到my页面后，两个router-link始终都会有选中样式，代码如下

<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:8080/#/my,那么to="/”和to="/my"都可以匹配到，所有都会激活选中样式

4.要解决问题也有两种方式，都是通过加入一个exact属性

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

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

b.在router-link中写入exact

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

5.也可以如此解决

<router-link to="/home" class="menu-home" active-class="active" exact>首页</router-link>
路由中加入重定向
{
  path: '/',
  redirect: '/home'
}