如何给router-link进行高亮设置——全局配置linkActiveClass

1.需求背景:有时候我们点击即一个属性的时候，我们希望被点击的部分能够高亮显示，
这是另外一个csdn博主写的，觉得讲的很好，点击可阅读

下面是我的解决办法
在页面渲染以后，标签会自动转换为a标签，而在编辑时包含在router-link中的标签会原封不动的渲染，如下面的例子

  <router-link to="/goods" class="tab-item"><div>商品</div></router-link>
  <router-link to="/seller" class="tab-item"><div>店家</div></router-link>
  <router-link to="/rates" class="tab-item"><div >评价</div></router-link>

渲染后的页面元素为

从图中我们可以看出，div元素依然存在，router-link转化成了a标签，而且被点击的选项，会自动出现acitve这一类的类名。为了实现被点击后出现响应的属性，我们使用“linkActiveClass”,

linkActiveClass的目的就是定义被激活的链接元素的类名，vue渲染时会自动为激活元素分配一个类名，但他是不固定的，为了我们样式定义方便，我们为被激活元素容易规定类名。

在路由配置文件中的进行配置，我的路由配置文件是router目录下的router.js

import Vue from 'vue'
import Router from 'vue-router'
import Goods from 'components/goods/good'
import Rates from 'components/rates/rates'
import Seller from 'components/seller/seller'
// import App from '../App.vue'
Vue.use(Router)

export default new Router({
  linkActiveClass:'active',
  routes: [
    {
      path: '/goods',
      name: 'Goods',
      component: Goods
    },{
      path: '/rates',
      name:'Rates',
      component: Rates
    },{
        path: '/seller',
        name:'Seller',
        component: Seller
      }
  ]
})

如代码所示，我们为被激活元素设置类名为active。其结果就是本文第一章图片所示，因此我们想要设置被激活元素的样式采用如下语法(我使用的是stylus)

<style lang="stylus" scoped>
    .tab
        display flex
        width 100%
        height 40px
        line-height 40px
        .tab-item
            flex 1
            text-align center
            cursor pointer
            & > div
              font-size 20px
              color rgb(77,85,93)
        .active > div
            color red
</style>

通过上面设置，当元素被点击时，字体会变成红色。

注意，我在这里犯过一个错误，如果这里直接写成 .active 是不会有任何效果的，必须指明是div元素。