vue2.0中关于active-class

一、首先，active-class是什么，

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

相关可查阅文档：https://router.vuejs.org/zh-cn/api/router-link.html

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

方法一：直接在路由js文件中配置linkActiveClass

export default new Router({

  linkActiveClass: 'active',

})

方法二：在router-link中写入active-class

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

三、最近在项目中出现一个问题，使用第二种方法添加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"都可以匹配到，所有都会激活选中样式

五、要解决问题并达到效果，有三种方式，都是通过加入一个exact属性

　　方式一：直接在路由js文件中配置linkActiveClass，然后在标签中写入exact

export default new Router({

  linkExactActiveClass: 'active',

})

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

　　方式二：router-link中写入exact

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

　　方式三：将acrive-class换成exact-active-class

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

秒客网