Vue2.0 通過監聽路由變化給父級路由菜單添加active樣式

本文主要介紹Vue通過watch監聽路由變化，設置active高亮。

1.設置父子路由
在router文件下的index.js 關鍵代碼

routes: [
    {
      path: '/',
      component: resolve => (require(["@/pages/Index"], resolve)),
      children: [
        {
          path: '/',
          name: "WorkBench",
          component: resolve => (require(["@/pages/WorkBench"], resolve))
        },{
          path: 'messageList',
          name: "MessageList",
          component: resolve => (require(["@/pages/MessageList"], resolve))
        }
      ]
    },
]

2.在index.vue頁面引入

<template>
  <div class="warp">
    <router-view />   
    <div class="tabbar-warpper">
      <div
        class="tabbar-item"
        :class="{'active': selectedPath == item.page }"
        @click="getVal(item.page)"
        v-for="(item,index) in tabbarDes"
        :key="index"
      >
        <div class="item-icon">
          <span class="iconfont" :class="selectedPath == item.page ? item.onIcon : item.icon"></span>
        </div>
        <div class="item-text" v-text="item.txt"></div>
      </div>
    </div>
  </div>
</template>

樣式和data內的參數請自行整理

主要方法，通過watch校驗路由切換

  watch: {
    $route(toRouter) {
      // console.log(toRouter) //打開的新路由
      // console.log(fromRouter) //原先的路由
      this.selectedPath = toRouter.path; // active高亮的參數對象
    }
  },