vue3 使用addRoute动态添加路由，页面刷新就白屏解决办法

问题，通过接口动态添加路由，第一次从登录页跳转还是正常的，说明路由添加成功了，但是刷新后就白屏了，且控制台报错路由匹配不到，在项目的main.js，router和路由拦截器中添加了一大堆打印后发现，在控制台报错的时候，根本就没进入路由守卫。（具体我就不贴代码了，我添加的太多了）

要解决路由匹配不到的问题，首先我们应该拿到动态路由，但是以往在路由守卫里进行的动态路由初始化现在行不通，因为在进路由守卫之前，程序已经进行了路由匹配

首先在router文件夹下定义你处理路由数据的方法。路由守卫外先执行一遍路由初始化，注意我这里用了await，必须等接口数据处理完成

export const setupRouterHooks = async()=> {// 首先调用接口获取菜单列表并处理成需要的路由数组，addRoute添加路由也在这个方法中,这个按照各自的要求自己处理，这里就不具体贴代码了await getMenuRoute()router.beforeEach(async(to, from, next) => {if (!token) {next({ path: '/login' })} else { if (store.getters.menu.length === 0) { await getMenuRoute()} next()}})router.afterEach(to => {......})}

然后就是挂载的时机，在main.js中的路由初始化也要修改一下，我这里是在router里写了一个方法，在main.js中调用。注意，这里也用了await，如果初始化还没完成，就已经挂载上了app也会匹配不到路由

// 在router/index.js中添加线面的方法export const setupRouter = async (app) => {// 路由钩子函数await setupRouterHooks()app.use(router)}

// main.jsapp.use(animate)app.use(store)//此处一定要用await，等路由信息处理完成后再挂载await setupRouter(app) app.use(VueUeditorWrap)app.use(Vant)app.mount('#app')

网上也有在路由拦截里用next({ …to, replace: true })替换next()，但是我这里依旧是没起作用，还死循环了，原因是路由没有匹配到，重新在进入一次路由守卫还是会重新再进入路由守卫，一直这样循环下去，所以排除了

以上是我的解决方法，仅供参考吧！