vue3+vite+vue-router4的项目中,使用上述动态路由,第三级子路由加载时会出现空白页面,刷新后正常显示,问题记录:
用户登录后进行判断,1.token合法,2.to.path === '/login'跳转登录,3.判断动态路由列表,列表空则获取动态路由,有路由则判断是否能匹配到路由,如匹配不到to.matched.length === 0则跳转404。
动态路由处理:1.vuesList = import.meta.glob('../../views/*/*.vue')动态加载任何层级的任何.vue文件。
以上是常规处理登录的简略步骤。遇到的问题是,本地路由后经常出现空白页面,且无任何报错,刷新后正常显示。
这个问题是 Vue Router 4 中动态路由加载的常见问题。主要原因是路由组件异步加载的时机问题。以下是解决方案:
问题原因分析
- 异步组件加载延迟:
import.meta.glob返回的是异步函数 - 路由嵌套层级深:三级路由的组件加载顺序问题
- Vue Router 生命周期:路由切换时组件未及时解析