溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了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 動態注入路由白屏，再次刷新才顯示頁面問題
問題描述：
由于系統需要動態注入路由，剛開始在路由攔截里面根據賬號權限動態獲取路由，然后注入到本地路由中，代碼如下：
// 嘗試獲取本地 store 用戶信息中權限字段
const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (hasRoles) {
next()
} else {
try {
// 用token換取用戶信息
store.dispatch('user/getInfo').then(roles => {
if (!roles) new Error('roles error!') // 根據獲取的用戶權限映射對應的路由信息
store.dispatch('permission/generateRoutes', roles).then(accessRoutes => {
if (!accessRoutes) new Error('accessRoutes error!')
// 動態加入路由
router.addRoutes(accessRoutes)
// 確保路由完整性，設置replace 為true 這樣導航就不會留下歷史記錄。
next({
...to,
replace: true
})
}) })
} catch (error) {
// 刪除本地token 并且重新登陸
await store.dispatch('user/resetToken')
Message.error(error || 'Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}上述內容就是vue項目中動態菜單刷新出現空白的解決方法，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
