Vue項目中使用addRoutes出現(xià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)用一下即可。

以上是“Vue項目中使用addRoutes出現(xiàn)問題怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！