vue項(xiàng)目中導(dǎo)航菜單刷新狀態(tài)未消失怎么解決

vue項(xiàng)目中導(dǎo)航菜單刷新狀態(tài)未消失怎么解決？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

使用vue element-ui框架構(gòu)建公共導(dǎo)航欄

按F5刷新就會(huì)返回默認(rèn)定義的路由，使用 "$route.path" 刷新后還是在最新的一個(gè)路由：

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

補(bǔ)充知識(shí)：vue 動(dòng)態(tài)菜單 刷新空白 解決方案

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

代碼示范注意點(diǎn)：

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

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

3. 如果你想了解更多

1.為什么 用了緩存會(huì)失敗？ 這是因?yàn)楫?dāng)你存入緩存時(shí)候用了JSON.stringify 這東西 會(huì)改變 compoent對(duì)象 讓它少了一個(gè) render函數(shù)。這里你可以打印出來(lái)你緩存之后 又解析 出來(lái)的路由 比對(duì)一下 而 addRouters()要求它接受的數(shù)組參數(shù)必須嚴(yán)格符合路由規(guī)則。

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

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

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

看完上述內(nèi)容，你們掌握vue項(xiàng)目中導(dǎo)航菜單刷新狀態(tài)未消失怎么解決的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！