addRoutes動態添加路由導致Duplicate named routes definition報錯和刷新後空白問題

vue-router動態路由
配置挺噁心的 一不小心就會進入死循環
然後瀏覽器宕機
cpu爆炸
電腦死機
下班

Duplicate named routes definition報錯原因

addRoutes 方法僅僅是幫你注入新的路由，並沒有幫你剔除其它路由

解決方案

使用router.addRoutes(routes)之前調用resetRouter()清空路由

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

刷新頁面空白原因

多半是邏輯錯誤,需要調試看,原因也是動態增加的路由找不到了,導致刷新404(看最後有沒有配置404路由)或者空白

next({ …to, replace: true })

• 設置replace:true，這樣導航就不會留下歷史記錄
• to: Route: 即將要進入的目標 路由對象
• from: Route: 當前導航正要離開的路由
• next: Function: 一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。

router.beforeEach(async(to, from, next) => {
next({ ...to, replace: true })
}