【VUE+Elemet 】动态设置el-menu导航,刷新页面保持当前菜单选中项及路由，与此同时标签同时变化

（1）、 设置属性 :default-active=“activeIndex”
（2）、watch方法检测路由变化
（3）、created生命周期设置路由具体代码如下：

基础版

<template>
  <div id="app">
    <el-menu
      :default-active="activeIndex"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <el-menu-item index="/">
        <i class="el-icon-menu"></i>
        <span slot="title">导航一</span>
      </el-menu-item>
      <el-menu-item index="/about">
        <i class="el-icon-document"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
    </el-menu>
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: "/"
    };
  },
  // 检测路由变化
  watch: {
    $route() {
      this.setCurrentRoute();
    }
  },
  methods: {
    setCurrentRoute() {
      this.activeIndex= this.$route.path; // 通过他就可以监听到当前路由状态并激活当前菜单
    }
  },
  created() {
    this.setCurrentRoute();
  }
};
</script>

温馨提示： :default-active="activeIndex"里面的：不可少

升级版
1、

navigation.vue 导航
tag.vue 标签

2、效果

3、见资源 我的资源链接