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 })
}