active-class 与 exact-active-class 区别

active-class

类型: string

默认值: “router-link-active”

默认是全包含匹配规则，即path名全包含在当前routerpath名开头的router也会被匹配到

设置链接激活时使用的CSS类名。默认值可以通过路由的构造选项linkActiveClass来全局配置。

测试active-class：

在登录页面匹配到to=’/login’的时候，首页to=’/'也会被匹配到

<template>
  <div class="hello">
    我是登录
    <router-link to='/'>首页</router-link>
    <router-link to='/login'>登录</router-link>
  </div>
</template>
<style scoped>
.router-link-active {
    
    
  border-bottom: 4px solid blue;
}
</style>

active-class匹配效果：

exact-active-class

类型: string

默认值: “router-link-exact-active”

配置当链接被精确匹配的时候应该激活的class。注意默认值也是可以通过路由构造函数选项linkExactActiveClass进行全局配置的。

测试exact-active-class：

在登录页面匹配到to=’/login’的时候，首页to=’/'不会被匹配到

<template>
  <div class="hello">
    我是登录
    <router-link to='/'>首页</router-link>
    <router-link to='/login'>登录</router-link>
  </div>
</template>
<style scoped>
.router-link-exact-active {
    
    
    border-bottom: 4px solid red;
}
</style>

exact-active-class匹配效果：