vue-router4動(dòng)態(tài)路由刷新404/白屏的解決
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)目一開始，通過createRouter創(chuàng)建路由的時(shí)候，使用路由實(shí)例（通常有404、login等）。
2、登錄成功后，通過后臺(tái)接口獲取后端配置的路由，然后addRouter，并將路由存至vuex內(nèi)。
3、路由跳轉(zhuǎn)，通過beforeEach路由導(dǎo)航守衛(wèi)進(jìn)行跳轉(zhuǎn)前的監(jiān)聽，判斷是否有本地路由（vuex）,如果沒有，通過接口獲取后端配置的路由，然后addRoute路由。
但遇見問題了：跳轉(zhuǎn)至某個(gè)頁面后，刷新404
第一步配置靜態(tài)路由的是，將不匹配地址同意導(dǎo)航到404頁面了，代碼如下
{
// 找不到路由重定向到404頁面
path: "/:pathMatch(.*)",
component: Layout,
redirect: "/404",
hideMenu: true
},這就導(dǎo)致在動(dòng)態(tài)權(quán)限添加路由的時(shí)候，所加的權(quán)限路由在使用地址匹配是都會(huì)被攔截到404頁面。輸入網(wǎng)址導(dǎo)航會(huì)，刷新頁面會(huì)，在頁面中通過點(diǎn)擊等方式直接觸發(fā)的路由不會(huì)出現(xiàn)404。
所以將此路由（404）從靜態(tài)路由表去除，放到動(dòng)態(tài)權(quán)限路由獲取后再addRouter。
但是，當(dāng)刷新頁面時(shí)，會(huì)出現(xiàn)白屏
提示沒有匹配到相應(yīng)路徑，也就是說路由還沒加上。仔細(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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue Element UI 表單自定義校驗(yàn)規(guī)則及使用
這篇文章主要介紹了Vue Element UI 表單自定義效驗(yàn)規(guī)則及使用,文中通過代碼介紹了常見表單效驗(yàn)規(guī)則，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
詳解vue-cli開發(fā)環(huán)境跨域問題解決方案
本篇文章主要介紹了vue-cli開發(fā)環(huán)境跨域問題解決方案，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-06-06
Vue表格首列相同數(shù)據(jù)合并實(shí)現(xiàn)方法
這篇文章主要介紹了Vue實(shí)現(xiàn)表格首列相同數(shù)據(jù)合并的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
詳解Vue中如何實(shí)現(xiàn)圖片處理與濾鏡效果
Vue.js作為一個(gè)靈活的JavaScript框架,可以很容易地與圖像處理庫和濾鏡效果庫集成,以實(shí)現(xiàn)各種圖像處理需求,下面我們就來學(xué)習(xí)一下vue是如何實(shí)現(xiàn)圖片處理與濾鏡效果的吧2023-10-10
Nuxt.js的路由跳轉(zhuǎn)操作(頁面跳轉(zhuǎn)nuxt-link)
這篇文章主要介紹了Nuxt.js的路由跳轉(zhuǎn)操作(頁面跳轉(zhuǎn)nuxt-link)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue-cli3啟動(dòng)服務(wù)如何自動(dòng)打開瀏覽器配置
這篇文章主要介紹了vue-cli3啟動(dòng)服務(wù)如何自動(dòng)打開瀏覽器配置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Django+vue跨域問題解決的詳細(xì)步驟,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
vue實(shí)現(xiàn)上傳圖片添加水印(升級(jí)版)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)上傳圖片添加水印的升級(jí)版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue之Element級(jí)聯(lián)選擇器多選傳值以及回顯方式(樹形結(jié)構(gòu))
這篇文章主要介紹了Vue之Element級(jí)聯(lián)選擇器多選傳值以及回顯方式(樹形結(jié)構(gòu))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue3-HTTP請(qǐng)求方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06