vue-router 动态路由刷新页面空白或者404

场景：

登录系统后需调取接口，从后端动态拿到菜单动态设置路由，这样直接登录并跳转没有问题，但是直接访问动态添加的路由，就会出现空白页或者404页面

产生404原因：

404路由是在设置动态路由之前加入的，当访问一个动态路由时，访问的路由还不存在，当通过addRoute加入路由，并不会触发新的导航。也就是说，除非触发新的导航，否则不会显示所添加的路由。所以重定向到了404

解决：

404路由在设置动态路由时添加，当addRoute加入路由也会出现空白，这时需要在路由守卫里重新触发路由加载

 if (token) {
            // 没有菜单
            if (!userStore.menus.length) {
               // 这里设置动态路由
                await userStore.afterLogin()
                // 动态理由设置好之后，重新触发导航
                router.replace(to)
            }
        } else {
            // 非白名单，跳转到登录页
            if (!WHITE_NAME_LIST.includes((to as any).name)) {
                router.replace(LOGON_NAME)
            }
        }