今天在部署项目到服务器后,发现动态路由失效,测试开发环境时路由都可以正常跳转,生产环境控制台报错:
原代码如下:
查看了官方文档,并没有找到合适的方案,后百度查看了一些解决方案,但都没有解决实际问题,断断续续搞了好几天,终于解决了问题,解决方案如下:
1. 组件添加name名称
2.动态添加路由的方法
// routerList:路由数据// modules: 所有的组件文件export const asyncRouteFile = async (routeList:any,modules:any)=>{// 路由数据转化成平级let rs = handleRoutes(routeList)return new Promise<string>(async (resolve, reject) => {for (const key in modules) {if (Object.prototype.hasOwnProperty.call(modules, key)) {const e = modules[key];await e().then((mod:any) =>{// mod.default?.name就是组件中的name名称let r = rs.find((item:any) => ponent === mod.default?.name)if (!r) return// 匹配到组件之后添加路由router.addRoute('Dashbord',{path: r.path ,name:ponent,meta: r.meta,component: mod.default ,});})}}resolve('成功')})}
3.登录中使用
/* 登录之后的操作 */ // 获取路由let res = await getRouters()// 获取views下所有的.tsx结尾的文件(自行替换.vue或.js)const modules = import.meta.glob("../**.tsx")// 调用方法添加路由await asyncRouteFile(res.data.data,modules)
4.解决页面刷新之后路由失效问题
let flag = 0router.beforeEach(async (to: any, from: any, next: any) => {const token = sessionStorage.getItem(SystemInfos.tokenHeader);if (token) {if (to.path === '/login') {next('/')} else {if (flag === 0) {flag++let res = await getRouters()const modules = import.meta.glob("../**.tsx")await asyncRouteFile(res.data.data,modules)next({ path: to.path })} else {next()}}} else {if (to.path === '/login') {next()} else {next('/login')}}});
到此结束战斗 ! 希望对你有帮助 !
如果觉得《手摸手教你vite + vue3 + tsx 项目打包后动态路由无法加载页面问题》对你有帮助，请点赞、收藏，并留下你的观点哦！
