elementUI用编程式导航实现路由跳转页面或点击浏览器前进后退按钮后导航正常高亮显示

如何更加灵活地使用elementUI中的NavMenu且不受组件内部限制来实现自己想要的各种效果？

当使用elementUI中的NavMenu组件实现侧边栏导航，页面通过this.$router.push()实现路由跳转到不同页面而不是点击左侧菜单时，路由发生变化，但左侧菜单不会高亮显示，因为elementUI是通过菜单中的index与路由进行匹配来实现菜单高亮显示，当不是通过点击左侧菜单跳转页面时，路由跳转了但是页面并未响应，所以这时可通过watch监听路由变化来实现菜单高亮，当点击浏览返回按钮时导航菜单也会高亮显示。说白了就是elementUI如何让导航菜单中的index匹配两个或更多个不同的路由，而且使浏览器的返回按钮也不会受到影响。

下面是个简单的小例子：

1.用NavMenu实现左侧导航菜单：（通过使用watch监听路由变化来实现当用编程式导航跳转路由时或点击浏览器返回按钮时导航菜单正常高亮显示）

    <template>
      <el-menu
        class="menu-list"
        :default-active="activedMenu"
        background-color="#30333C"
        text-color="white"
        router
        @select="handleSelect"
      >
        <el-menu-item v-waves index="user">
          <span slot="title">菜单1</span>
        </el-menu-item>
        <el-menu-item v-waves index="role">
          <span slot="title">菜单2</span>
        </el-menu-item>
      </el-menu>
    </template>
    <script>
    export default {
  data() {
    return {
     activedMenu: "user"
    };
  },
  methods: {
  //点击左侧菜单，实现路由正常跳转
    handleSelect(key, keyPath) {
      if (key === "user") {
        this.activedMenu = "user";
        //因为点击菜单1时，会在原路由的基础上再拼接上/user,导致路由错误，所以需要路由回退到初始状态
        this.$router.push({ path: "/" });
      } else {
        this.activedMenu = "role";
         //因为点击菜单2时，会在原路由的基础上再拼接上/role,导致路由错误，所以需要路由回退到初始状态
        this.$router.push({ path: "/" });
      }
    },
  },
  watch:{
  //解决浏览器前进后退按钮，导航正常高亮显示
    $route(to,from){
      if(to.path=='/access/role'){
        this.activedMenu = "role"
      }else{
        this.activedMenu = 'user'
      }
    }
  },
  created() {
  //解决编程式导航跳转页面菜单高亮显示
    if (this.$route.path === "/access/role") {
      this.activedMenu = "role";
    } else {
      this.activedMenu = "user";
    }
  },

2.菜单1页面列表点击详情用编程式导航实现页面跳转到详情页式，菜单1继续高亮显示

//跳转详情页方法：
detailsUser(workcode) {
  this.$router.push({
    path: "/access/user/detail",
    query: { workcode: workcode }
  });
},