原文地址：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激活。