Vue Router构建选项linkActiveClass全局配置 ＜router-link＞ 默认的激活的class使菜单高亮显示

以Vue CLI项目来说。

在router--》index.js中配置：

export default new Router({
  linkActiveClass: 'link-active',
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    ...
  ]
})

App.vue中底部tabbar为需要高亮的菜单：

<template>
  <div id="app">
   ... 
   <!-- 底部 -->
    <div id="tabbar">
      <ul>
        <li v-for="(tabbar,index) in tabbars" :key="tabbar.id">
          <router-link :to="tabbar.router.name">
            <img :src="tabbar.imgSrc" alt="">
            <p>{{ tabbar.title }}</p>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
...
</script>

<style scoped>
  #tabbar ul li a.link-active {
    background-color: #26a1ff75;
  }
</style>

存在的问题：进入内页后tabbar菜单不再高亮显示，改进：

App.vue：

<template>
  <div id="app">
    ...
    <!-- 底部 -->
    <div id="tabbar">
      <ul>
        <li v-for="(tabbar,index) in tabbars" :key="tabbar.id">
          <router-link :to="tabbar.router.name" @click.native="changeHash(index)" :class="{'link-active': index==currentIndex}">
            <!-- :class中的index为当前点击菜单的index -->
            <img :src="tabbar.imgSrc" alt="">
            <p>{{ tabbar.title }}</p>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
...
export default {
  name: 'App',
  data(){
    return {
      ...
      currentIndex: 0
    }
  },
  methods: {
    changeHash(index) {
      this.currentIndex = index;
    }
  }
}
</script>

<style scoped>
  ...
  #tabbar ul li a.link-active {
    background-color: #26a1ff75;
  }
</style>

改进后页面：