Vue項目中使用addRoutes出現(xiàn)問題的解決方法
更新時間：2021年08月30日 12:55:14 作者：code_fly
大家應(yīng)該都知道可以通過vue-router官方提供的一個api-->addRoutes可以實現(xiàn)路由添加的功能,事實上就也就實現(xiàn)了用戶權(quán)限,這篇文章主要給大家介紹了關(guān)于Vue項目中使用addRoutes出現(xiàn)問題的解決方法,需要的朋友可以參考下
前言
addRoutes官方介紹：
函數(shù)簽名：
router.addRoutes(routes: Array<RouteConfig>)
動態(tài)添加更多的路由規(guī)則。參數(shù)必須是一個符合 routes 選項要求的數(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è)置路由的可匹配路徑
}
這個方法就是將路由重新實例化，相當(dāng)于換了一個新的路由，之前加的路由就不存在了，需要在登出的時候， 調(diào)用一下即可。
總結(jié)
到此這篇關(guān)于Vue項目中使用addRoutes出現(xiàn)問題解決的文章就介紹到這了,更多相關(guān)Vue使用addRoutes的問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue的配置項'vue.config.js'是用來配置Vue項目的構(gòu)建配置的,它是一個可選的配置文件,放置在項目的根目錄下,這篇文章主要給大家介紹了關(guān)于vue配置vue.config.js的相關(guān)資料,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了VUE?axios每次請求添加時間戳問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue實現(xiàn)手機(jī)端省市區(qū)區(qū)域選擇
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)手機(jī)端省市區(qū)區(qū)域選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
原始值指的是 Boolean、Number、BigInt、String、Symbol、undefined、null 等類型的值，在 JavaScript 中，原始值是按值傳遞的，引用類型是按引用傳遞的，這意味著，如果一個函數(shù)接收了一個原始值作為參數(shù)，那么形參和實參之間是沒有引用關(guān)系的，它們是完全獨(dú)立的兩個值2023-01-01
Vue3+Three.js實現(xiàn)為模型添加點擊事件
本文主要介紹了如何在Vue3和Three.js環(huán)境中為模型添加點擊事件監(jiān)聽,具體方法是利用Three.js的Vector2和Raycaster,首先,創(chuàng)建一個Vector2對象來獲取鼠標(biāo)位置；然后,創(chuàng)建一個Raycaster對象來投射光線2024-10-10
這篇文章主要介紹了vue 授權(quán)獲取微信openId操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
本篇文章主要介紹了詳解Vue組件之間的數(shù)據(jù)通信實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
vue實現(xiàn)word，pdf文件的導(dǎo)出功能
這篇文章給大家介紹了vue實現(xiàn)word或pdf文檔導(dǎo)出的功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
這篇文章主要給大家介紹了關(guān)于前端vue播放m3u8、flv、mp4視頻的方法,隨著前端大屏頁面的逐漸壯大,客戶的需求也越來越多,大屏上面展示的事物也越來越豐富,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了Vue中引用echarts的超詳細(xì)教程,文中的示例代碼簡潔易懂,對我們熟練使用vue有一定的幫助,需要的小伙伴可以參考一下2023-09-09