vue-router4動態路由,刷新404/白屏


vue3+vue-router4+vuex4+vite實現動態路由的時候,出現刷新404或者空白

一、動態路由的實現:

1、在項目一開始,通過createRouter創建路由的時候,使用路由實例(通常有404、login等)。

2、登錄成功后,通過后台接口獲取后端配置的路由,然后addRouter,並將路由存至vuex內。

3、路由跳轉,通過beforeEach路由導航守衛進行跳轉前的監聽,判斷是否有本地路由(vuex),如果沒有,通過接口獲取后端配置的路由,然后addRoute路由。

但遇見問題了:跳轉至某個頁面后,刷新404

第一步配置靜態路由的是,將不匹配地址同意導航到404頁面了,代碼如下

  {
    // 找不到路由重定向到404頁面
    path: "/:pathMatch(.*)",
    component: Layout,
    redirect: "/404",
    hideMenu: true
  },

這就導致在動態權限添加路由的時候,所加的權限路由在使用地址匹配是都會被攔截到404頁面。輸入網址導航會,刷新頁面會,在頁面中通過點擊等方式直接觸發的路由不會出現404。

所以將此路由(404)從靜態路由表去除,放到動態權限路由獲取后再addRouter。

但是,當刷新頁面時,會出現白屏

提示沒有匹配到相應路徑,也就是說路由還沒加上。仔細查看vue-router官方API,有一個提示

而在代碼中,router.addRoute的觸發是在路由導航守衛中檢測到當前未保存動態菜單信息(vuex)。在這之后用next()放行,而根據官方提示和控制台相關打印信息可以看到,warn提示在addRouter添加路由之前,所以解決方法是將next()改為next(to),觸發新的一個導航,此時可以正確匹配到動態路由的相應地址。


免責聲明!

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



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