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() 促使頁面每次刷新，重新根據(jù)后臺返回數(shù)據(jù)生成動態(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ā)現(xiàn)刷新之后成功了但回退發(fā)生了問題 請把路由模式切換成 history vue-route 默認使用hash模式。也就是地址上出現(xiàn)眨眼的 /#/ 當然 history模式本體跑沒問題 發(fā)包后 需要后端配置 后端配置指導鏈接 把鏈接復制發(fā)2給后端同學即可。
3. 如果你想了解更多
1.為什么 用了緩存會失敗？ 這是因為當你存入緩存時候用了JSON.stringify 這東西 會改變 compoent對象 讓它少了一個 render函數(shù)。這里你可以打印出來你緩存之后 又解析 出來的路由 比對一下 而 addRouters()要求它接受的數(shù)組參數(shù)必須嚴格符合路由規(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)不消失,顯示對應的路由界面操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue-quill-editor實現(xiàn)圖片上傳功能
這篇文章主要為大家詳細介紹了vue-quill-editor實現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
vue大文件分片上傳之simple-uploader.js的使用
本文主要介紹了vue大文件分片上傳之simple-uploader.js的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
這篇文章主要介紹了Vue.js slot插槽的作用域插槽用法詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
基于VuePress 輕量級靜態(tài)網(wǎng)站生成器的實現(xiàn)方法
VuePress是一個基于Vue的輕量級靜態(tài)網(wǎng)站生成器以及為編寫技術文檔而優(yōu)化的默認主題。這么文章給大家詳細介紹了vuepress 靜態(tài)網(wǎng)站生成器的方法，需要的朋友參考下吧2018-04-04
今天給大家分享vue中tab 選項卡的一些套路，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-11-11
利用Vue+intro.js實現(xiàn)頁面新手引導流程功能
在同學們使用某些網(wǎng)站的新版本頁面的時候,經(jīng)常會出現(xiàn)一個類似于新手引導一樣的效果,來幫助同學們更好的熟悉新版本頁面的功能和使用,這篇文章主要給大家介紹了關于如何利用Vue+intro.js實現(xiàn)頁面新手引導流程功能的相關資料,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細介紹了Vuejs實現(xiàn)購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了Vue前端項目部署的三種方案,本文通過圖文并茂的形式給大家介紹的非常詳細,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue3的setup的使用和原理解析,通過本文我們學習了?setup?函數(shù)執(zhí)行的過程及?Vue?是如何處理捕獲?setup?的返回結果的，需要的朋友可以參考下2022-09-09
vue跳轉頁面并且實現(xiàn)參數(shù)傳遞接受示例
這篇文章主要為大家介紹了vue跳轉頁面并且實現(xiàn)參數(shù)傳遞接受示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06