根据不同路由，使对应的菜单高亮显示

element-ui中有关于菜单的代码，点击对应的菜单实现高亮显示，若是直接在URL中输入path地址，页面可以跳转，但菜单还是停留在原先的菜单上，路由跳转了但是对应的菜单并未高亮显示。

el-menu代码：

<el-menu
  class="el-menu-vertical-demo"
  @open="handleOpen"
  @close="handleClose"
  :collapse="isCollapse"
  background-color="#ffffff"
  text-color="#43464a"
  active-text-color="#8c10be"
  :default-active="NavActive"
  unique-opened
  router
  style="border:none;"
>

default-active属性表示当前激活菜单的index，给它赋值NavActive，当点击菜单时，菜单自动高亮显示，这是element-ui框架自己完成的。

当不点击菜单时，怎么让菜单高亮显示，有以下两种情况：

1.刷新页面时，通过获取到当前页面的路由，使得对应的菜单高亮显示。
通过window.location.href获取到当前页面的路由，然后赋值给NavActive 即可。需要在页面加载完成前调用该方法（beforeMount）。

//刷新页面时获取当前路由，对应菜单高亮显示
getActiveNav: function() {
  let currentUrl = window.location.href;
  this.NavActive = currentUrl.split('#')[1].replace("/","");
},

beforeMount() {
  this.getActiveNav();
},

2.在菜单栏中直接输入URL值时，通过监听路由变化，使得对应的菜单高亮显示。
通过监听路由的变化，获取到要跳转的路由，将对应的path赋值给NavActive 。

watch: {
  //监听路由变化
  $route(index) {
    let path = index.path.substr(1);
    this.handleSelect(path);
  }
}

//监听路由的变化，对应菜单高亮显示
handleSelect(index) {
  this.NavActive = index;
}


注意：
1.以上两种情况都是需要将获取/监听到的路由的值赋值给变量NavActive ，此时属性default-active（当前激活菜单的 index）即为想要高亮显示的菜单对应的路由，就自然高亮显示了。所以重点就是获取到对应的路由，赋值即可。
2.:default-active="$route.path"
3.default-active表示的是“当前激活菜单的index”，需要是/path，即需要带‘/’。

根据不同路由，使对应的菜单高亮显示

推荐阅读