Vue項目中使用addRoutes出現問題的解決方法

Posted on by

前言

addRoutes官方介紹：

函數簽名：

router.addRoutes(routes: Array<RouteConfig>)

動態添加更多的路由規則。參數必須是一個符合 routes 選項要求的數組。

這兩天做vue後臺權限管理系統的時候，發現使用vue提供的addRoute添加路由以後，會出現兩個bug，一起來看看如何解決吧~

一、404頁面

1. 出現的原因

使用vue提供的addRoutes添加瞭動態路由以後，404頁面的路由設置不在路由的末尾瞭

2. 解決方案

將404頁面的路由添加到動態路由的末尾

代碼如下（示例）：

// xxx => 用戶有的動態路由數組
xxx.push({ path: '*', redirect: '/404', hidden: true })

// 動態添加路由配置
router.addRoutes(xxx)

二、刷新白屏

1. 出現原因

刷新時，動態路由沒有加載完畢

2. 解決方案

路由添加完畢後，在進入頁面

代碼如下（示例）：

if(用戶的動態路由沒有加載){
	// 解決刷新出現的白屏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的問題內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：