element框架导航菜单在页面刷新时会回到默认项

<template>
  <div>
    <el-menu
        :default-active="activeIndex"
        router
        class="el-menu-vertical-demo"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="/index/home">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="/index/simulationTime">
            <i class="el-icon-time"></i>
            <span slot="title">aaaaaa</span>
        </el-menu-item>
        <!--<el-menu-item index="/index/deductionControl">
            <i class="el-icon-setting"></i>
            <span slot="title">bbbbbb</span>
        </el-menu-item>-->
        <el-menu-item index="/index/simulationProcess">
            <i class="el-icon-tickets"></i>
            <span slot="title">cccccc</span>
        </el-menu-item>
        <el-menu-item index="/index/pilotInterface">
            <i class="el-icon-setting"></i>
            <span slot="title">dddddd</span>
        </el-menu-item>
     </el-menu>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 根据当前路由设置默认值     根据需求使用path或者name
      activeIndex: this.$route.path
    }
  },
  // 通过监听器解决  导航菜单在页面刷新时会回到默认项
  watch: { 
    '$route' (to, from) {
      // 监听路由的变化  如果路由发生改变则当前tab栏默认值也相应改变
      this.activeIndex = to.path
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      this.activeIndex = key
    }
  }
}
</script>