您好,登錄后才能下訂單哦!
本篇文章為大家展示了vue項(xiàng)目中動態(tài)菜單刷新出現(xiàn)空白的解決方法,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
1.先確認(rèn)自己在route.js 或者 main.js 中有沒有使用 路由守衛(wèi)vue.beforeEach和vue.addRouters() 促使頁面每次刷新,重新根據(jù)后臺返回?cái)?shù)據(jù)生成動態(tài)路由,就像你在登陸時(shí)做的事情一樣。
代碼示范注意點(diǎn):
//注意:確定自己避免了路由守衛(wèi)進(jìn)入死循環(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(){ //請?jiān)谶@里做你登陸之后所做的創(chuàng)建動態(tài)路由的事情 一模一樣去做。 //不要用緩存,session或localstorage 否則會報(bào)錯(cuò)。你需要重新發(fā)出請求 登陸怎么做的 這里就怎么做的 };
2. 如果你發(fā)現(xiàn)刷新之后成功了但回退發(fā)生了問題 請把路由模式切換成 history vue-route 默認(rèn)使用hash模式。也就是地址上出現(xiàn)眨眼的 /#/ 當(dāng)然 history模式本體跑沒問題 發(fā)包后 需要后端配置 后端配置指導(dǎo)鏈接 把鏈接復(fù)制發(fā)2給后端同學(xué)即可。
3. 如果你想了解更多
1.為什么 用了緩存會失??? 這是因?yàn)楫?dāng)你存入緩存時(shí)候用了JSON.stringify 這東西 會改變 compoent對象 讓它少了一個(gè) render函數(shù)。這里你可以打印出來你緩存之后 又解析 出來的路由 比對一下 而 addRouters()要求它接受的數(shù)組參數(shù)必須嚴(yán)格符合路由規(guī)則。
2.next({...to, replace: true}) 為什么必不可少呢? 在hash模式下 你的動態(tài)路由可能還沒創(chuàng)建完成就 跑其它代碼了 畢竟 路由守衛(wèi)是異步操作 在history模式下 可能沒有這個(gè)問題 未實(shí)測 寫上最好。
3.每次刷新發(fā)請求拿路由不合適?
繼續(xù)緩存,但從緩存取出來路由之后,復(fù)寫路由里面所有的compoent對象。復(fù)寫方法很多,如遞歸遍歷路由。然后 item.compoent = vueName; vueName也就是你導(dǎo)出來的vue文件變量。
補(bǔ)充知識:VUE 動態(tài)注入路由白屏,再次刷新才顯示頁面問題
問題描述:
由于系統(tǒng)需要動態(tài)注入路由,剛開始在路由攔截里面根據(jù)賬號權(quán)限動態(tài)獲取路由,然后注入到本地路由中,代碼如下:
// 嘗試獲取本地 store 用戶信息中權(quán)限字段
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!') // 根據(jù)獲取的用戶權(quán)限映射對應(yīng)的路由信息
store.dispatch('permission/generateRoutes', roles).then(accessRoutes => {
if (!accessRoutes) new Error('accessRoutes error!')
// 動態(tài)加入路由
router.addRoutes(accessRoutes)
// 確保路由完整性,設(shè)置replace 為true 這樣導(dǎo)航就不會留下歷史記錄。
next({
...to,
replace: true
})
}) })
} catch (error) {
// 刪除本地token 并且重新登陸
await store.dispatch('user/resetToken')
Message.error(error || 'Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
上述內(nèi)容就是vue項(xiàng)目中動態(tài)菜單刷新出現(xiàn)空白的解決方法,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。