溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下Vue項目中使用addRoutes出現問題怎么辦，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
addRoutes官方介紹：
函數簽名：
router.addRoutes(routes: Array<RouteConfig>)
動態添加更多的路由規則。參數必須是一個符合 routes 選項要求的數組。
這兩天做vue后臺權限管理系統的時候，發現使用vue提供的addRoute添加路由以后，會出現兩個bug，一起來看看如何解決吧~
使用vue提供的addRoutes添加了動態路由以后，404頁面的路由設置不在路由的末尾了
將404頁面的路由添加到動態路由的末尾
代碼如下（示例）：
// xxx => 用戶有的動態路由數組
xxx.push({ path: '*', redirect: '/404', hidden: true })
// 動態添加路由配置
router.addRoutes(xxx)刷新時，動態路由沒有加載完畢
路由添加完畢后，在進入頁面
代碼如下（示例）：
if(用戶的動態路由沒有加載){
// 解決刷新出現的白屏bug
next({
...to, // next({ ...to })的目的,是保證路由添加完了再進入頁面 (可以理解為重進一次)
replace: true // 重進一次, 不保留重復歷史
})
} else {
next()
}路由設置是通過router.addRoutes(xxx)來添加的，退出時，并沒有清空，再次登陸，又加了一次，所以有重復。
代碼如下（示例）：
// 重置路由
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // 重新設置路由的可匹配路徑
}這個方法就是將路由重新實例化，相當于換了一個新的路由，之前加的路由就不存在了，需要在登出的時候， 調用一下即可。
以上是“Vue項目中使用addRoutes出現問題怎么辦”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
