1.問題描述

問題1：在使用預設普通字元去匹配的情況時，導航頁面在不重新整理是圖示高亮正常，

但重新整理後高亮由於受到default-active 預設值的影響，高亮與顯示頁面不匹配。

問題2：在使用$route.path的情況下，el-menu-item 的index值設為url固定的url值時，若url沒有新增等改變時，

能正常執行，但是若某一頁的url在後面業務中增加了（如原來是/home/abc 後面由於各種原因變成了 /home/abc/page ），則高亮會再一次失效。

2.解決思路

利用不同頁面中的url具有特定的不同部分來進行與

　　 將path的值傳入vuex中進行處理。在vue頁面的create中傳path值到mutations中進行字串處理，

將處理結果賦值到state中事先定義的變數中，vue頁面中的create() 會獲取該值並賦值到data中與

圖1.1 大致思路圖

3.具體實現方式

vue頁面導航的選單處，default-active繫結的是data中的navParameter。

index中的值命名要與url中的有關(後面vuex傳值過來會進行高亮與頁面的匹配)

圖 1.2 vue頁面選單欄部分

vue頁面data部分與create函式部分，create中傳path到vuex中，並處理vuex傳來的值

圖 1.3 vue頁面的data與create部分

程式碼：

  data () {
    return {
      navParameter: ''
    }
  },
  created () {
    
 
this.$store.commit('navParameterCal', this.$route.path)
    this.$data.navParameter = this.$store.state.navParameter
  },

4.vuex頁面

圖 1.4 state部分

圖 1.5 mutations部分，vue頁面傳來的值處理過程

我這裡傳過去的url中favorites與是其中一個導航欄有關，經過處理後將state中的值"navParameter" 改變，

這個值會傳到vue頁面中，在執行create時會將vue頁面中的data中對應的值改變，渲染時高亮就會匹配相關頁面，即

使重新整理也不會出現高亮與所在頁面不匹配的情況。

navParameterCal (state, navUrl) {
      const navUrlList = navUrl.split('/').filter((item) => { return item !== '' })
      if (navUrlList.length <= 1) {
        state.navParameter = navUrlList[0]       //將處理後的值賦值給state中的navParameter
      } else {
        state.navParameter = navUrlList[1]       //同上
      }
    },

位址列url與傳入mutations中的處理情況(這裡根據自己的url處理，我的url在home頁面時只有/home ，沒有後面的值，所以加了個if判斷)

圖 1.6位址列url與mutations

5.el-menu-item的index值與path處理後傳後來的值

mutations中處理得到的值要有與選單中index裡的值有對應的，與path也要有對應的部分，

即使後期url後面被新增其他值對導航也不會有影響，index中的命名也要選擇url中唯一的部分

圖 1.6 index的命名