根據不同路由，使對應的菜單高亮顯示

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，即需要帶‘/’。