快捷導(dǎo)航

vue-router4動(dòng)態(tài)路由刷新404/白屏的解決

更新時(shí)間：2023年04月13日 15:47:17 作者：流氓兔講文化

本文主要介紹了vue-router4動(dòng)態(tài)路由刷新404/白屏的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

一、動(dòng)態(tài)路由的實(shí)現(xiàn)：

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

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

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

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

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

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

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

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

但是，當(dāng)刷新頁(yè)面時(shí)，會(huì)出現(xiàn)白屏

提示沒(méi)有匹配到相應(yīng)路徑，也就是說(shuō)路由還沒(méi)加上。仔細(xì)查看vue-router官方API，有一個(gè)提示

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

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

您可能感興趣的文章: