vue 菜单高亮，多级菜单保持高亮

主要实现多级路由跳转后还想保持左侧菜单高亮。

1.在创建路由的时候给子路由多增加一个参数用来判断。

    {
      path: '/EchartsZz',
      name: '柱状图',
      component:EchartsZz,
      meta:{
        showfater: true
     },
      children:[
        {
          path: '/EchartsZz/EchartsZzs',
          name: '柱状图子',
          component:EchartsZzs,
          meta:{
            childrenUrl:'/EchartsZz' //childrenUrl用来判断，值设置为父路由的path
         },
        }
      ]
    },

2.左侧菜单栏

:default-active="defaultActive"//这里设置一个值defaultActive

这个defaultActive放到vuex中方便后续操作。
3.监听路由

  watch:{
    $route(to, from) {
      if(to.meta.childrenUrl){
        this.SetDefaultActive(to.meta.childrenUrl)
      }else{
        this.SetDefaultActive(this.$route.path)
      }
    }
  },

监听路由变化判断要跳转的路由中是否存在childrenUrl，存在则表示他是多级路由拿到他的childrenUrl给vuex中的defaultActive。
4.vuex设置

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    defaultActive:sessionStorage.getItem("isactive") || '' ,//菜单高亮的值
  },
  getters: {
  },
  mutations: {
    //修改菜单高亮的值
    SetDefaultActive(state,value){
      state.defaultActive = value
      sessionStorage.setItem('isactive', value);
    }
  },
  actions: {
  },
  modules: {
  }
})

修改vuex中的值并使用sessionStorage做到持久化储存避免页面刷新菜单高亮失效。