目錄

• 前言
  
• 一、404頁面
  
• 1. 出現的原因
  
• 2. 解決方案
  
• 二、重新整理白屏
  
• 1. 出現原因
  
• 2. 解決方案
  
• 三、路由重複
  
• 1. 出現原因
  
• 2. 解決方案
  
• 總結

前言

addRoutes官方介紹：

函式簽名：

router.addRoutes(routes: Array<RouteConfig>)

動態新增更多的路由規則。引數必須是一個符合 routes 選項要求的陣列。

這兩天做後臺許可權管理系統的時候，發現使用vue提供的addRoute新增路由以後，會出現兩個bugwww.cppcns.com，一起來看看如何解決吧~

一、404頁面

1. 出現的原因

使用vue提供的addRoutes添加了動態路由以後，404頁面的客棧

2. 解決方案

將404頁面的路由新增到動態路由的末尾

程式碼如下（示例）：

// xxx =&ggKJtht; 使用者有的動態路由陣列
xxx.push({ path: '*',redirect: '/404',hidden: true })

// 動態新增路由配置
router.addRoutes(xxx)

二、重新整理白屏

1. 出現原因

重新整理時，動態路由沒有載入完畢

2. 解決方案

路由新增完畢後，在進入頁面

程式碼如下（示例）：

if(使用者的動態路由沒有載入){
	// 解決刷新出現gKJth的白屏bug
  next({
    ...to,// next({ ...to })的目的,是保證路由新增完了再進入頁面 (可以理解為重進一次)
    replace: true // 重進一次,不保留重複歷史
  })
} else {
	next()
}

三、路由重複

1. 出現原因

路由設定是通過router.addRoutes(xxx)來新增的，退出時，並沒有清空，再次登陸，又加了一次，所以有重複。

2. 解決方案

程式碼如下（示例）：

// 重置路由
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // 重新設定路由的可匹配路徑
}

這個方法就是將路由重新例項化，相當於換了一個新的路由，之前加的路由就不存在了，需要在登出的時候， 呼叫一下即可。

總結

到此這篇關於Vue專案中使用addRoutes出現問題解決的文章就介紹到這了,更多相關Vue使用addRoutes的問題內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！