快捷導(dǎo)航

基于vue 動(dòng)態(tài)菜單刷新空白問題的解決

更新時(shí)間：2020年08月06日 16:12:30 作者：guanzhangl

這篇文章主要介紹了基于vue 動(dòng)態(tài)菜單刷新空白問題的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

1.先確認(rèn)自己在route.js 或者 main.js 中有沒有使用路由守衛(wèi)vue.beforeEach和vue.addRouters() 促使頁面每次刷新，重新根據(jù)后臺(tái)返回?cái)?shù)據(jù)生成動(dòng)態(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})// 必不可少的，確保你的動(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ā)生了問題請(qǐng)把路由模式切換成 history vue-route 默認(rèn)使用hash模式。也就是地址上出現(xiàn)眨眼的 /#/ 當(dāng)然 history模式本體跑沒問題發(fā)包后需要后端配置后端配置指導(dǎo)鏈接把鏈接復(fù)制發(fā)2給后端同學(xué)即可。

3. 如果你想了解更多

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

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

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

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

補(bǔ)充知識(shí)：VUE 動(dòng)態(tài)注入路由白屏，再次刷新才顯示頁面問題

問題描述：

由于系統(tǒng)需要?jiǎng)討B(tài)注入路由，剛開始在路由攔截里面根據(jù)賬號(hào)權(quán)限動(dòng)態(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)限映射對(duì)應(yīng)的路由信息
   store.dispatch('permission/generateRoutes', roles).then(accessRoutes => {
    if (!accessRoutes) new Error('accessRoutes error!')
    // 動(dòng)態(tài)加入路由
    router.addRoutes(accessRoutes)
    // 確保路由完整性，設(shè)置replace 為true 這樣導(dǎo)航就不會(huì)留下歷史記錄。
    next({
     ...to,
     replace: true
    })
   })
  })
 } catch (error) {
  // 刪除本地token 并且重新登陸
  await store.dispatch('user/resetToken')
  Message.error(error || 'Has Error')
  next(`/login?redirect=${to.path}`)
  NProgress.done()
 }
}

這樣寫只有在登陸之后刷新頁面才會(huì)動(dòng)態(tài)注入，解決辦法就是在登陸之后執(zhí)行一下紅色字體部分代碼

以上這篇基于vue 動(dòng)態(tài)菜單刷新空白問題的解決就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: