vue3中动态添加的路由，页面刷新之后白屏

2023年10月4日，今天配置了一下动态路由，初学者，一开始会出现这样的问题，刷新页面之后动态路由就没了，也就是有动态路由的页面刷新之后报错并白屏。

[Vue Router warn]: No match found for location with path "xxxxx/xxxxx"

所以我一开始考虑的是在beforeEach这个路由守卫里面重新导入一下动态路由，但是还是不行，报的警告的时间会在我重新加载动态路由时间之前。也就是说beforeEach里面的内容执行之前，已经报错了，报错是因为to，而白屏是因为next（）

后面发现是因为在beforeEach执行的时候，to这个参数还是访问的以前的routes，所以to里面匹配不到要去的路径，所以我就在beforeEach前增加一个判断，如果有token，就重新添加动态路由，这样就不会出现动态路由刷新白屏。

if (localStorage.getItem("token")) {
    initRoutes();//这个是重新添加动态路由的函数
}

router.beforeEach((to, from, next) => {
    if (!localStorage.getItem("token") && to.name !== "Login") {
        next({ name: "Login" })
    }
    else if (!localStorage.getItem("token") && to.name == "Login") {
        next();
    }
    else {
        next()
    }
})

后续还需要完善，作为初学者肯定会存在有瑕疵的地方，也会慢慢改进学习。 —————————————————————————————————————————————————————————————————————————————————————————— 还有一种办法去解决，但是这种方式不能有效解决warning，还是会弹出一个警告，但是刷新不会白屏了。

主要是通过next({…to,replace:true})，这个会一直循环执行守卫，直到to里面的资源配置好了，所以我们给他一个有关to的判定条件，让它跳出if就行了，走else里面的next（）

router.beforeEach((to, from, next) => {
    if (!localStorage.getItem("token") && to.name !== "Login") {
        next({ name: "Login" })
    }
    else if (!localStorage.getItem("token") && to.name == "Login") {
        next();
    }
    else {
        if (!to.redirectedFrom) {
            initRoutes();
            next({ ...to, replace: true })
        } else {
            next()
        }
    }
})

我个人不是很喜欢这个，因为会报警告，但是第一种方式感觉又不太完善，因为第一种方式相当于没有进守卫，只要有token就添加路由了。