VUE—linkActiveClass 动态配置active c

一.在点击导航栏的时候，让被点击的那一个有背景色，其他的没有背景色？

const router = new VueRouter({
    routes,
    linkActiveClass: 'is-active'
});
.is-active{
  background:red;
}

这样<router-link>被点击激活的时候就会被加上is-active这个class了。注意如果没有设置router-link的标签类型，会是<a>标签,<a>标签是没有宽度和高度的。将router-link 这样的a标签转化为li标签

<router-link to='index' tag="li" event="mouseover">

二.自己来操控 active Class 给加的位置，并不想它随着路由的改变而改变
假如侧边栏我的钱包，路由为'/myWallet'，在'/myWallet'页面可以操作提现，会进入'/withdraw'提现页面，路由发生变化，从'/myWallet' 身上移到'/withdraw'上了。如何让 '/myWallet' 这个页面的active Class 保留住呢？给'/withdraw' 加上一个路由元信息，在侧边栏去检查路由元信息，然后看是否需要给其active class

{
  path: '/myWallet',
  name: 'MyWallet',
  component: MyWallet,
  meta: { 
    requiresAuth: true,
    active: '/MyWallet'
  }
},
{
  path: '/withdraw',
  name: 'Withdraw',
  component: withdraw,
  meta: { 
    requiresAuth: true ,
    active: '/MyWallet'
  }
},
<router-link tag="li" class="li-item" to="/MyWallet" :class="{'is-active':$route.meta.active === '/MyWallet'}">我的钱包</router-link>

如果只有一个页面 对应一个active的,就不用添加 meta下面的active属性了

<router-link tag="li" class="li-item" to="/userinfo" :class="{'is-active':$route.path === '/userinfo'}"></router-link>