vue2.0中的active-class

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>