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
匹配效果: