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 動態選單 重新整理空白問題的解決就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。