vue3动态路由刷新出现空白页的原因与最优解

router.beforeEach(async (to, from, next) => {
    const whiteList = ['/login']
    let token = store.getters.GET_TOKEN;//token
    let hasRoutes=store.state.hasRoutes; //默认是false，刷新页面这个也是false
    let menuList=store.getters.GET_MENULIST; //后端返回的菜单列表
    if (token) {
        if(!hasRoutes){
            bindRoute(menuList);//添加动态路由
            store.commit("SET_ROUTES_STATE",true);
            }
        next();
    } else {
        if (whiteList.includes(to.path)) {
            next();
        } else {
            next('/login');
        }
    }
})
//添加动态路由
const bindRoute = (menuList) => {
    let newRoutes = router.options.routes;
    menuList.forEach(menu => {
        if (menu.children) {
            menu.children.forEach(m => {
                // 菜单转成路由
                let route = menuToRoute(m, menu.name);
                if (route) {
                    newRoutes[0].children.push(route); // 添加到路由管理
                }
            })
        }
    })
    // 重新添加到路由
    newRoutes.forEach(route => {
        router.addRoute(route)
    })
}
// 菜单转成路由
const menuToRoute = (menu, parentName) => {
    let route = {
        name: menu.name,
        path: menu.path,
        meta: {
            parentName: parentName
        },
        children:[],
    }
    if (!menu.component) {
        route.component = ''
    } else {
        route.component = () => import('@/views/' + menu.component + '.vue')
    }
    return route
}

router.beforeEach(async (to, from, next) => {
    const whiteList = ['/login']
    let token = store.getters.GET_TOKEN;
    let hasRoutes=store.state.hasRoutes;
    let menuList=store.getters.GET_MENULIST;
    if (token) {
        console.log(store.state.editabTabs)
        if(!hasRoutes){
            bindRoute(menuList);
            store.commit("SET_ROUTES_STATE",true);
            //next({ ...to, replace: true });//----------解决
            next({path:'/index'}); //----------解决
            }
        next();
    } else {
        if (whiteList.includes(to.path)) {
            next();
        } else {
            next('/login');
        }
    }
})
//添加动态路由
const bindRoute = (menuList) => {
    let newRoutes = router.options.routes;
    menuList.forEach(menu => {
        if (menu.children) {
            menu.children.forEach(m => {
                // 菜单转成路由
                let route = menuToRoute(m, menu.name);
                if (route) {
                    newRoutes[0].children.push(route); // 添加到路由管理
                }
            })
        }
    })
    // 重新添加到路由
    newRoutes.forEach(route => {
        router.addRoute(route)
    })
}
// 菜单转成路由
const menuToRoute = (menu, parentName) => {
    let route = {
        name: menu.name,
        path: menu.path,
        meta: {
            parentName: parentName
        },
        children:[],
    }
    if (!menu.component) {
        route.component = ''
    } else {
        route.component = () => import('@/views/' + menu.component + '.vue')
    }
    return route
}