基於vue2.0 router動態路由 刷新空白問題的解決


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 動態注入路由白屏,再次刷新才顯示頁面問題


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM