vue3+vue-router4+vuex4+vite實現(xiàn)動態(tài)路由的時候，出現(xiàn)刷新404或者空白

一、動態(tài)路由的實現(xiàn)：

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

2、登錄成功后，通過后臺接口獲取后端配置的路由，然后addRouter，并將路由存至vuex內(nèi)。

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

但遇見問題了：跳轉(zhuǎn)至某個頁面后，刷新404

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

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

這就導致在動態(tài)權(quán)限添加路由的時候，所加的權(quán)限路由在使用地址匹配是都會被攔截到404頁面。輸入網(wǎng)址導航會，刷新頁面會，在頁面中通過點擊等方式直接觸發(fā)的路由不會出現(xiàn)404。

所以將此路由（404）從靜態(tài)路由表去除，放到動態(tài)權(quán)限路由獲取后再addRouter。

但是，當刷新頁面時，會出現(xiàn)白屏

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

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

到此這篇關于vue-router4動態(tài)路由刷新404/白屏的解決的文章就介紹到這了,更多相關vue-router4刷新動態(tài)路由內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論