Vue項(xiàng)目中使用addRoutes出現(xiàn)問題的解決方法
前言
addRoutes官方介紹：
函數(shù)簽名：
router.addRoutes(routes: Array<RouteConfig>)
動態(tài)添加更多的路由規(guī)則。參數(shù)必須是一個符合 routes 選項(xiàng)要求的數(shù)組。
這兩天做vue后臺權(quán)限管理系統(tǒng)的時候，發(fā)現(xiàn)使用vue提供的addRoute添加路由以后，會出現(xiàn)兩個bug，一起來看看如何解決吧~
一、404頁面
1. 出現(xiàn)的原因
使用vue提供的addRoutes添加了動態(tài)路由以后，404頁面的路由設(shè)置不在路由的末尾了
2. 解決方案
將404頁面的路由添加到動態(tài)路由的末尾
代碼如下（示例）：
// xxx => 用戶有的動態(tài)路由數(shù)組
xxx.push({ path: '*', redirect: '/404', hidden: true })
// 動態(tài)添加路由配置
router.addRoutes(xxx)
二、刷新白屏
1. 出現(xiàn)原因
刷新時，動態(tài)路由沒有加載完畢
2. 解決方案
路由添加完畢后，在進(jìn)入頁面
代碼如下（示例）：
if(用戶的動態(tài)路由沒有加載){
// 解決刷新出現(xiàn)的白屏bug
next({
...to, // next({ ...to })的目的,是保證路由添加完了再進(jìn)入頁面 (可以理解為重進(jìn)一次)
replace: true // 重進(jìn)一次, 不保留重復(fù)歷史
})
} else {
next()
}
三、路由重復(fù)
1. 出現(xiàn)原因
路由設(shè)置是通過router.addRoutes(xxx)來添加的，退出時，并沒有清空，再次登陸，又加了一次，所以有重復(fù)。
2. 解決方案
代碼如下（示例）：
// 重置路由
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // 重新設(shè)置路由的可匹配路徑
}
這個方法就是將路由重新實(shí)例化，相當(dāng)于換了一個新的路由，之前加的路由就不存在了，需要在登出的時候， 調(diào)用一下即可。
總結(jié)
到此這篇關(guān)于Vue項(xiàng)目中使用addRoutes出現(xiàn)問題解決的文章就介紹到這了,更多相關(guān)Vue使用addRoutes的問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
當(dāng)你跑起一個項(xiàng)目的時候,第一步需要先安裝依賴npm install,下面這篇文章主要給大家介紹了關(guān)于npm?install安裝報(bào)錯的幾種常見情況,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
VUE3中引入.env下的環(huán)境變量,顯示process未定義問題
這篇文章主要介紹了VUE3中引入.env下的環(huán)境變量,顯示process未定義問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
VUE引入騰訊地圖并實(shí)現(xiàn)軌跡動畫的詳細(xì)步驟
這篇文章主要介紹了VUE引入騰訊地圖并實(shí)現(xiàn)軌跡動畫,引入步驟大概是在 html 中通過引入 script 標(biāo)簽加載API服務(wù)，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue3中解決各場景l(fā)oading過度的五種方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以學(xué)習(xí)一下2023-11-11
vue通過style或者class改變樣式的實(shí)例代碼
這篇文章主要介紹了vue通過style或者class改變樣式的實(shí)例代碼，在文中給大家提到了vue的一些樣式(class/style)綁定,需要的朋友可以參考下2018-10-10
關(guān)于webpack-dev-server配置代理解決前端開發(fā)中的跨域問題
這篇文章主要介紹了關(guān)于webpack-dev-server配置代理解決前端開發(fā)中的跨域問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vuecli4插件svg-sprite-loader使用svg圖標(biāo)
這篇文章主要為大家介紹了vuecli4插件svg-sprite-loader使用svg圖標(biāo)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
實(shí)現(xiàn)Vue的markdown文檔可以在線運(yùn)行的方法示例
這篇文章主要介紹了實(shí)現(xiàn)Vue的markdown文檔可以在線運(yùn)行的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
Vue實(shí)現(xiàn)騰訊云點(diǎn)播視頻上傳功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)騰訊云點(diǎn)播視頻上傳功能的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
Vue3非遞歸渲染Tree組件的初步實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue3非遞歸渲染Tree組件的初步實(shí)現(xiàn),文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定幫助,需要的朋友可以參考下2024-05-05