设置router-link激活时的css

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

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

   

• 网站首页

   

• 关于我

   

• 网站管理

   

• 个人中心

当点击上边类似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但是现在的写法存在一个问题，那就是无论你点击哪一个的时候

网站首页

都被激活了，原因在于无论哪个项中都包含了'/'

这时就需要用到exact属性了  写法如下：

   

• 网站首页

   

• 关于我

   

• 网站管理

   

• 个人中心

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