设置router-link激活时的css

原文地址：http://www.kssfeng.com/content/3c4f69611fa311e9a181525400cc6d13

我们经常会遇到这样的一个需求，

 <ul>
    <li><router-link to="/">网站首页</router-link></li>
    <li><router-link to="/aboutmepage">关于我</router-link></li>
    <li><router-link v-bind:class="{elHidden:roleName=='admin'?false:true}" to="/manage">网站管理</router-link></li>
    <li><router-link v-bind:class="{elHidden:!isLogin}" to="/perinfo/article">个人中心</router-link></li>
</ul>
       
当点击上边类似tab的某一项的时候给它设置一个单独的激活css。
这时激活router-link需要用到他的active-class属性，他的默认值时router-link-active
这是css可以这样写：
a.router-link-active,nav li a:hover {
    display: block;
    background: #C93282;
    color: #fff;
    border-radius: 0 20px;
    text-shadow: none
  }
  
这样就可以实现点击时候激活一个与众不同的css但是现在的写法存在一个问题，那就是无论你点击哪一个的时候
<li><router-link to="/" exact>网站首页</router-link></li>都被激活了，原因在于无论哪个项中都包含了'/'
这时就需要用到exact属性了  写法如下：
 <ul>
    <li><router-link to="/" exact>网站首页</router-link></li>
    <li><router-link to="/aboutmepage">关于我</router-link></li>
    <li><router-link v-bind:class="{elHidden:roleName=='admin'?false:true}" to="/manage">网站管理</router-link></li>
    <li><router-link v-bind:class="{elHidden:!isLogin}" to="/perinfo/article">个人中心</router-link></li>
</ul>

exact使'/'仅且只能时'/'时css激活。