Vue項(xiàng)目中使用addRoutes出現(xiàn)問(wèn)題的解決方法
前言
addRoutes官方介紹：
函數(shù)簽名：
router.addRoutes(routes: Array<RouteConfig>)
動(dòng)態(tài)添加更多的路由規(guī)則。參數(shù)必須是一個(gè)符合 routes 選項(xiàng)要求的數(shù)組。
這兩天做vue后臺(tái)權(quán)限管理系統(tǒng)的時(shí)候，發(fā)現(xiàn)使用vue提供的addRoute添加路由以后，會(huì)出現(xiàn)兩個(gè)bug，一起來(lái)看看如何解決吧~
一、404頁(yè)面
1. 出現(xiàn)的原因
使用vue提供的addRoutes添加了動(dòng)態(tài)路由以后，404頁(yè)面的路由設(shè)置不在路由的末尾了
2. 解決方案
將404頁(yè)面的路由添加到動(dòng)態(tài)路由的末尾
代碼如下（示例）：
// xxx => 用戶有的動(dòng)態(tài)路由數(shù)組
xxx.push({ path: '*', redirect: '/404', hidden: true })
// 動(dòng)態(tài)添加路由配置
router.addRoutes(xxx)
二、刷新白屏
1. 出現(xiàn)原因
刷新時(shí)，動(dòng)態(tài)路由沒(méi)有加載完畢
2. 解決方案
路由添加完畢后，在進(jìn)入頁(yè)面
代碼如下（示例）：
if(用戶的動(dòng)態(tài)路由沒(méi)有加載){
// 解決刷新出現(xiàn)的白屏bug
next({
...to, // next({ ...to })的目的,是保證路由添加完了再進(jìn)入頁(yè)面 (可以理解為重進(jìn)一次)
replace: true // 重進(jìn)一次, 不保留重復(fù)歷史
})
} else {
next()
}
三、路由重復(fù)
1. 出現(xiàn)原因
路由設(shè)置是通過(guò)router.addRoutes(xxx)來(lái)添加的，退出時(shí)，并沒(méi)有清空，再次登陸，又加了一次，所以有重復(fù)。
2. 解決方案
代碼如下（示例）：
// 重置路由
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // 重新設(shè)置路由的可匹配路徑
}
這個(gè)方法就是將路由重新實(shí)例化，相當(dāng)于換了一個(gè)新的路由，之前加的路由就不存在了，需要在登出的時(shí)候， 調(diào)用一下即可。
總結(jié)
到此這篇關(guān)于Vue項(xiàng)目中使用addRoutes出現(xiàn)問(wèn)題解決的文章就介紹到這了,更多相關(guān)Vue使用addRoutes的問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue的配置項(xiàng)'vue.config.js'是用來(lái)配置Vue項(xiàng)目的構(gòu)建配置的,它是一個(gè)可選的配置文件,放置在項(xiàng)目的根目錄下,這篇文章主要給大家介紹了關(guān)于vue配置vue.config.js的相關(guān)資料,需要的朋友可以參考下2024-01-01
VUE?axios每次請(qǐng)求添加時(shí)間戳問(wèn)題
這篇文章主要介紹了VUE?axios每次請(qǐng)求添加時(shí)間戳問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue實(shí)現(xiàn)手機(jī)端省市區(qū)區(qū)域選擇
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)手機(jī)端省市區(qū)區(qū)域選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
原始值指的是 Boolean、Number、BigInt、String、Symbol、undefined、null 等類型的值，在 JavaScript 中，原始值是按值傳遞的，引用類型是按引用傳遞的，這意味著，如果一個(gè)函數(shù)接收了一個(gè)原始值作為參數(shù)，那么形參和實(shí)參之間是沒(méi)有引用關(guān)系的，它們是完全獨(dú)立的兩個(gè)值2023-01-01
Vue3+Three.js實(shí)現(xiàn)為模型添加點(diǎn)擊事件
本文主要介紹了如何在Vue3和Three.js環(huán)境中為模型添加點(diǎn)擊事件監(jiān)聽(tīng),具體方法是利用Three.js的Vector2和Raycaster,首先,創(chuàng)建一個(gè)Vector2對(duì)象來(lái)獲取鼠標(biāo)位置；然后,創(chuàng)建一個(gè)Raycaster對(duì)象來(lái)投射光線2024-10-10
這篇文章主要介紹了vue 授權(quán)獲取微信openId操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
詳解Vue組件之間的數(shù)據(jù)通信實(shí)例
本篇文章主要介紹了詳解Vue組件之間的數(shù)據(jù)通信實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
vue實(shí)現(xiàn)word，pdf文件的導(dǎo)出功能
這篇文章給大家介紹了vue實(shí)現(xiàn)word或pdf文檔導(dǎo)出的功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-07-07
這篇文章主要給大家介紹了關(guān)于前端vue播放m3u8、flv、mp4視頻的方法,隨著前端大屏頁(yè)面的逐漸壯大,客戶的需求也越來(lái)越多,大屏上面展示的事物也越來(lái)越豐富,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了Vue中引用echarts的超詳細(xì)教程,文中的示例代碼簡(jiǎn)潔易懂,對(duì)我們熟練使用vue有一定的幫助,需要的小伙伴可以參考一下2023-09-09