router-link组件中的属性——active-class

主要作用是用来实现选中样式的切换，在vue-router中要使用active-class有两种方式：

1、 在router-link 中写入active-class active-class 选择样式时根据路由中的路径 (to=“/home”) 去匹配， 然后显示：

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

2、直接在路由js文件中配置linkActiveClass：

 exportdefaultnewRouter({
     linkActiveClass:'active',
 })

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

<div class="menu-btn">
    <router-linkto="/my"class="menu-my"active-class="active">
        我的
    </router-link>
</div>

引起的问题：

因为to="/" 引起的， active-class选择样式时根据路由中的路径去匹配， 然后显示， 例如在my页面中， 路由为localhost:8081/#/my，那么to="/”和to="/my"都可以匹配到， 所 有都会激活选中样式

解决方法：

        1.在 router-link 中写入 exact：

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

        2.在路由中加入重定向：

<router-link to="/" class="menu-home"active-class="active"exact>首页</router-link>
 {
 path: '/',
 redirect: '/home
}