解决在vue3中添加动态路由后，刷新页面空白，并且提示没有正确的路径。
问题
- 页面空白
- 控制台提示错误
解决过程
- 在
router.beforeEach的第一行打印to。 - 发现
to.matched.length为1，仅仅包含了没有动态添加的路由，那么跳转的目标页面是没有的。 - 同时
to的打印信息是后于warn的，说明路由在挂载的时候已经初始化完毕了，这个时候的路由都没来得及添加上去，已经去跳转了。 - 得出结论，如果将动态路由提前添加好，然后才挂载上去，这样才能跳转到目标路由。
代码
在permission.ts中封装一个添加路由的函数。
export const initRouter = async () => {
const res = await store.dispatch("permission/generateRoutes")
res.forEach((route: any) => {
router.addRoute(route)
})
}
在main.ts文件中引入使用。
const boot = async () => {
await initRouter()
app.use(router).use(store).use(Directives).mount("#app")
}
boot()
注意
- 请务必使用
async和await去等待路由挂载完毕。 - 网上有很多的方案，但是基本上会有各种问题，比如，判断
to.match.length是否为0，为0则去from.path，否则去to.path，这会出现刷新返回上一个页面的问题。比如，使用next({...to,replace:true}),会死循环，因为找不到路由，会一直去to.path,一直去next。
