在我们使用addRoutes方法配置动态路由时,经常会出现两个bug,以下我们就来说说这两个bug和解决办法
1.刷新页面出现的白屏bug
// 解决刷新出现的白屏bug
next({
...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)
replace: true // 重进一次, 不保留重复历史
})
2.退出后,再次登陆,发现菜单异常 (控制台有输出说路由重复)
原因:
路由设置是通过router.addRoutes(filterRoutes)
来添加的,退出时,并没有清空,再次登陆,又加了一次,所以有重复。
解决办法:
在路由配置文件中按需导出一个重置路由的方法,代码如下:
// 重置路由
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // 重新设置路由的可匹配路径
}
配置成功之后,在退出登录的代码中调用这个方法
// 1. 按需导入重置路由方法
import { resetRouter } from '@/router'
// 2. 使用
resetRouter()