使用vue element-ui框架構建公共導航欄（https://element.eleme.cn/#/zh-CN/component/menu）

按F5重新整理就會返回預設定義的路由，使用 "$route.path" 重新整理後還是在最新的一個路由：

<el-menu :default-active="$route.path"></el-menu>

補充知識：vue 動態選單 重新整理空白 解決方案

1.先確認自己在route.js 或者 main.js 中有沒有使用 路由守衛vue.beforeEach和vue.addRouters() 促使頁面每次重新整理，重新根據後臺返回資料生成動態路由，就像你在登陸時做的事情一樣。

程式碼示範注意點：

//注意：確定自己避免了路由守衛進入死迴圈
let oneRun = true; //通過oneRun變數控制 避免陷入死迴圈
router.beforeEach((to,from,next)=>{
  if(oneRun){
    oneRun = false;//必須在creatNewRouter() 執行
    createNewRouter();
    next({...to,replace: true})// 必不可少的，確保你的動態路由建立成功再去執行其它程式碼
  }
})
 
function createNewRouter(){
  //請在這裡做你登陸之後所做的建立動態路由的事情 一模一樣去做。
  //不要用快取，session或localstorage 否則會報錯。你需要重新發出請求 登陸怎麼做的 這裡就怎麼做的
};

2. 如果你發現重新整理之後成功了但回退發生了問題 請把路由模式切換成 history vue-route 預設使用hash模式。也就是地址上出現眨眼的 /#/ 當然 history模式本體跑沒問題 發包後 需要後端配置 後端配置指導連結 把連結複製發2給後端同學即可。

3. 如果你想了解更多

1.為什麼 用了快取會失敗？ 這是因為當你存入快取時候用了JSON.stringify 這東西 會改變 compoent物件 讓它少了一個 render函式。這裡你可以打印出來你快取之後 又解析 出來的路由 比對一下 而 addRouters()要求它接受的陣列引數必須嚴格符合路由規則。

2.next({...to,replace: true}) 為什麼必不可少呢？ 在hash模式下 你的動態路由可能還沒建立完成就 跑其它程式碼了 畢竟 路由守衛是非同步操作 在history模式下 可能沒有這個問題 未實測 寫上最好。

3.每次刷新發請求拿路由不合適？

繼續快取，但從快取取出來路由之後，複寫路由裡面所有的compoent物件。複寫方法很多，如遞迴遍歷路由。然後 item.compoent = vueName; vueName也就是你匯出來的vue檔案變數。

以上這篇vue 導航選單重新整理狀態不消失,顯示對應的路由介面操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。