vite+vue3+tsx项目打包后动态路由无法加载页面的问题及解决
更新时间:2024年03月15日 11:04:03 作者:coder丘山
这篇文章主要介绍了vite+vue3+tsx项目打包后动态路由无法加载页面的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vite+vue3+tsx打包后动态路由无法加载页面
在部署项目到服务器后,发现动态路由失效,测试开发环境时路由都可以正常跳转
生产环境控制台报错
原代码
如下:
查看了官方文档,并没有找到合适的方案,后百度查看了一些解决方案,但都没有解决实际问题
断断续续搞了好几天,终于解决了问题
解决方案
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) => item.component === mod.default?.name) if (!r) return // 匹配到组件之后添加路由 router.addRoute('Dashbord',{ path: r.path , name:r.component, 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 = 0 router.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') } } });
总结
到此结束战斗 !
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue3 + MybatisPlus实现批量删除功能(详细代码)
这篇文章主要介绍了Vue3 + MybatisPlus实现批量删除功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03Vue如何使用百度地图自定义信息窗口InfoWindow的样式
这篇文章主要介绍了Vue如何使用百度地图自定义信息窗口InfoWindow的样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论