1.vue2.0中的active-class的定义可见vue2.0的官方文档
https://router.vuejs.org/zh-cn/api/router-link.htmlhttps://router.vuejs.org/zh-cn/api/router-link.html
active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换;
2.应用场景
<template>
<ul>
<router-link tag="li" v-for="{name,path} in items" :key="name" :to="path" active-class="active" >{{name}}</router-link>
</ul>
</template>
3.遇到的问题
实现的效果每一个“li”标签都应用上了active效果
4.问题原因
to="/" 引起的,active-class选择样式时根据路由中的路径去匹配,然后显示,
例如在一个页面中,路由为“/#/my”那么to="/”和to="/my"都可以匹配到,所有都会激活选中样式
5.问题解决
a.路由配置成单独的路径
b.
1、直接在路由js文件中配置linkActiveClass
export default new Router({
linkExactActiveClass: 'active',
})
2、在router-link中写入exact
<router-link to="/" class="menu-home" active-class="active" exact>首页</router-link>