vue+element动态设置el-menu导航,刷新页面保持当前菜单选中项及路由

路由:  
const routes = [
    {
      path: '/',
      name: 'Home',
      meta:{isLogin:true,title: 'Home'},// 添加该字段，表示进入这个路由是需要登录的
      component: resolve=>(require(["@/views/index.vue"],resolve)),
      children: [
        {
          path: '/monitor',
          name: 'monitor',
          meta:{isLogin:true,title: 'monitor'},// 添加该字段，表示进入这个路由是需要登录的
          component: resolve=>(require(["@/views/monitor.vue"],resolve))
        },
        {
          path: '/realTime',
          name: 'realTime',
          meta:{isLogin:true,title: 'realTime'},// 添加该字段，表示进入这个路由是需要登录的
          component: resolve=>(require(["@/views/realTime.vue"],resolve))
        }
      ]
    },
    {
      path: '/homePage',
      name: 'homePage',
      meta:{isLogin:true,title: 'homePage'},// 添加该字段，表示进入这个路由是需要登录的
      component: resolve=>(require(["@/views/homePage.vue"],resolve))
    },
    {
      path: '/login',
      name: 'login',
      meta:{title: 'login'},// 添加该字段，表示进入这个路由是需要登录的
      component: resolve=>(require(["@/views/login.vue"],resolve))
    },
    {
      path: '/register',
      name: 'register',
      meta:{isLogin:true,title: 'register'},// 添加该字段，表示进入这个路由是需要登录的
      component: resolve=>(require(["@/views/register.vue"],resolve))
    },

    {
      path: '/history',
      name: 'history',
      meta:{isLogin:true,title: 'history'},// 添加该字段，表示进入这个路由是需要登录的
      component: resolve=>(require(["@/views/history.vue"],resolve))
    },
    {
      path: '/report',
      name: 'report',
      meta:{isLogin:true,title: 'report'},// 添加该字段，表示进入这个路由是需要登录的
      component: resolve=>(require(["@/views/report.vue"],resolve))
    },
    {
      path: '/report',
      name: 'report',
      meta:{isLogin:true,title: 'report'},// 添加该字段，表示进入这个路由是需要登录的
      component: resolve=>(require(["@/views/report.vue"],resolve))
    },
    {
      path: '/interval',
      name: 'interval',
      meta:{isLogin:true,title: 'report'},// 添加该字段，表示进入这个路由是需要登录的
      component: resolve=>(require(["@/views/component/statistics/interval.vue"],resolve))
    },
    {
      path: '/timeChara',
      name: 'timeChara',
      meta:{isLogin:true,title: 'report'},// 添加该字段，表示进入这个路由是需要登录的
      component: resolve=>(require(["@/views/component/statistics/timeChara.vue"],resolve))
    },
    {
      path: '/powerAnaly',
      name: 'powerAnaly',
      meta:{isLogin:true,title: 'report'},// 添加该字段，表示进入这个路由是需要登录的
      component: resolve=>(require(["@/views/component/statistics/powerAnaly.vue"],resolve))
    }
]

菜单
<el-menu
  router
  v-if="activeIndex"
  :default-active="activeIndex"
  class="el-menu-vertical-demo"
  @open="handleOpen"
  @close="handleClose"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-menu-item index="/homePage" class="el-menu-li">
    <i class="el-icon-menu"></i>
    <span slot="title">首页大屏</span>
  </el-menu-item>
  <el-menu-item index="/"  class="el-menu-li">
    <i class="el-icon-document"></i>
    <span slot="title">充电桩监控</span>
  </el-menu-item>
  <el-menu-item  index="/history"  class="el-menu-li">
    <i class="el-icon-setting"></i>
    <span slot="title">历史数据</span>
  </el-menu-item>
  <el-submenu index="4">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span>统计分析</span>
    </template>
    <el-menu-item-group>
      <el-menu-item index="/interval">充电起止区间统计</el-menu-item>
      <el-menu-item index="/timeChara">充电时间特性</el-menu-item>
      <el-menu-item index="/powerAnaly">充电电量分析</el-menu-item>
    </el-menu-item-group>
  </el-submenu>

</el-menu>

关键以下代码

data() {
  return {
    activeIndex : '/homePage'
  }
},
watch: {
  $route () {
    this.setCurrentRoute()
  }
},
methods: {
  setCurrentRoute () {
    this.activeIndex = this.$route.path //关键   通过他就可以监听到当前路由状态并激活当前菜单
  },
  handleOpen(key, keyPath) {
    console.log(key, keyPath);
  },
  handleClose(key, keyPath) {
    console.log(key, keyPath);
  }
},
created () {
  this.setCurrentRoute()
},