vue3项目动态路由的相关配置踩坑记录

1.路由文件中引入store的报错解决 

import { useUserStore } from '@/stores/user' // 错误：此时 Pinia 未初始化const store = useUserStore() // 报错

解决方案：

import pinia,{ useUserStore } from '@/stores/user'  或者在路由前置守卫中调用useUserStore()

2..路由懒加载import中动态绑定变量问题,会报failed to resolve specificer 'xx.vue' 这个错误

component: () => import(route.component) //这种写法会报错

解决方案：

   使用 import.meta.glob 预先声明所有可能路径

const modules=import.meta.glob('@/views/**/*.vue')
component: modules[`/src/views/${route.component}.vue`] // 匹配映射

3.本地存储路由对象时component存储为空问题

原因：函数不可序列化
component: () => import('...') 是一个函数，而 localStorage 只能存储字符串（通过 JSON.stringify() 转换时会丢失函数）

解决方案：componet：存普通的字符串，最后在使用时再转换为路由懒加载的写法（)=>import('...') 

4.动态路由添加完毕之后页面跳转空白问题

原因：使用 router.addRoute() 动态添加路由后立即跳转时，可能会遇到路由未完全加载导致跳转失败的问题

解决方案举例： next({ ...to, replace: true }) // 重试当前导航

router.beforeEach((to, from, next) => {if (需要动态路由且尚未加载) {loadDynamicRoutes().then(() => {next({ ...to, replace: true }) // 重试当前导航})} else {next()}
})