vue 導航菜單刷新狀態(tài)不消失,顯示對應的路由界面操作

更新時間：2020年08月06日 08:34:56 作者：blueBings

這篇文章主要介紹了vue 導航菜單刷新狀態(tài)不消失,顯示對應的路由界面操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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

按F5刷新就會返回默認定義的路由，使用 "$route.path" 刷新后還是在最新的一個路由：

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

補充知識：vue 動態(tài)菜單刷新空白解決方案

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

代碼示范注意點：

//注意：確定自己避免了路由守衛(wèi)進入死循環(huán)
let oneRun = true; //通過oneRun變量控制 避免陷入死循環(huán)
router.beforeEach((to,from,next)=>{
  if(oneRun){
    oneRun = false;//必須在creatNewRouter() 執(zhí)行
    createNewRouter();
    next({...to, replace: true})// 必不可少的，確保你的動態(tài)路由創(chuàng)建成功再去執(zhí)行其它代碼
  }
})
 
function createNewRouter(){
  //請在這里做你登陸之后所做的創(chuàng)建動態(tài)路由的事情 一模一樣去做。
  //不要用緩存，session或localstorage 否則會報錯。你需要重新發(fā)出請求 登陸怎么做的 這里就怎么做的
};

2. 如果你發(fā)現刷新之后成功了但回退發(fā)生了問題請把路由模式切換成 history vue-route 默認使用hash模式。也就是地址上出現眨眼的 /#/ 當然 history模式本體跑沒問題發(fā)包后需要后端配置后端配置指導鏈接把鏈接復制發(fā)2給后端同學即可。

3. 如果你想了解更多

1.為什么用了緩存會失?。?這是因為當你存入緩存時候用了JSON.stringify 這東西會改變 compoent對象讓它少了一個 render函數。這里你可以打印出來你緩存之后又解析出來的路由比對一下而 addRouters()要求它接受的數組參數必須嚴格符合路由規(guī)則。

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

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

繼續(xù)緩存，但從緩存取出來路由之后，復寫路由里面所有的compoent對象。復寫方法很多，如遞歸遍歷路由。然后 item.compoent = vueName; vueName也就是你導出來的vue文件變量。

以上這篇vue 導航菜單刷新狀態(tài)不消失,顯示對應的路由界面操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: