手摸手教你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')}}
});
到此结束战斗 ! 希望对你有帮助 !
手摸手教你vite + vue3 + tsx 项目打包后动态路由无法加载页面问题相关推荐
- 【万字长文】手摸手教你shell脚本编程
[万字长文]手摸手教你shell脚本编程 我写这篇文章的目的 前段时间参加了联创团队的春令营, 为期半个多月的春令营做了三个项目, 其中有一个项目是关于shell的, 当时完全没接触过shell脚本编 ...
- 手摸手教你做动态壁纸
手摸手教你做动态壁纸 Android · jeasonwong · 于 5 天前发布 · 最后由 xingstarx 于 2 天前回复 · 440 次阅读 项目地址:https://github.co ...
- 手摸手,带你用vue撸后台 系列一(基础篇) - 掘金
完整项目地址:vue-element-admin 系列文章: 手摸手,带你用 vue 撸后台 系列一(基础篇) 手摸手,带你用 vue 撸后台 系列二(登录权限篇) 手摸手,带你用 vue 撸后台 系 ...
- 快应用之手摸手,跟我走(1)
快应用发布快两周啦.这两天有空,就捣鼓了一个快应用.整体感觉来说,交互很流畅,基本功能和组件都有.上手也很快.希望官网推广能做好.好了,话不多说,先上 gitHub (传送门) gankQuick-快 ...
- 招聘行业颠覆者【伯小乐】| 手摸手产品研究院
手摸手产品研究院是由PMCAFF发起的深度研究产品的产品经理精华小分队,旨在每天一起研究一款产品,并且由阿德老师手摸手指导写分析报告. 作者微信:weihe2416 "伯小乐" 是 ...
- 短视频Gif快手-有点意思 | 手摸手产品研究院
手摸手产品研究院是由PMCAFF发起的深度研究产品的产品经理精华小分队,旨在每天一起研究一款产品,并且由阿德老师手摸手指导写分析报告. ...
- IN-我的生活in记 | 手摸手产品研究院
手摸手产品研究院是由PMCAFF发起的深度研究产品的产品经理精华小分队,旨在每天一起研究一款产品,并且由阿德老师手摸手指导写分析报告. 引言 IN是一款基于女性和品牌的时尚品位分享移动端社区,以图片社 ...
- 玩美自由行体验报告 | 手摸手产品研究院
手摸手产品研究院是由PMCAFF发起的深度研究产品的产品经理精华小分队,旨在每天一起研究一款产品,并且由阿德老师手摸手指导写分析报告. 个人微信:Hm_VS_Zyf 玩美自由行app是一款在线境外旅行 ...
- 手摸手产品研究院 | 玲珑沙龙-一个可以“撕逼”的女性文化社区
手摸手产品研究院是由PMCAFF发起的深度研究产品的产品经理精华小分队,旨在每天一起研究一款产品,并且由阿德老师手摸手指导写分析报告. 1-玲珑沙龙? 什么是玲珑沙龙,那些人在玩玲珑沙龙,为什么会玩? ...
最新文章
- 关于Angularjs中自定义指令一些有价值的细节和技巧
- 反爬虫——使用chrome headless时一些需要注意的细节
- (转)NGUI研究院之三种方式监听NGUI的事件方法
- 接触HTML和CSS心得体会
- 文巾解题 20有效的括号
- nuxt2中使用less
- python 小说爬虫_Python实现的爬取小说爬虫功能示例
- 腾讯的抖音官号被封杀了?抖音回应:谣言
- 没了 IDE,你的 Java 项目还能跑起来吗?
- C++ String封装
- excel如何拟合直线(怎样用excel拟合直线)
- 计算机课教师评价,教师课堂评价语集锦
- iPhone 开发分辨率 持续更新
- java怎么画八卦图_八卦图怎么画 最正确的八卦图
- Groovy语法介绍
- python爬虫解决频繁访问_python爬虫防止IP被封的一些措施
- Android 动画系列二之补间动画
- evolution邮箱_b2evolution简介
- 统计学习 EM算法 Python实现
- 游戏开发方案—《逃离禁闭岛》
热门文章
- 网络恐怖袭击真实存在吗
- photoShop如何制作产品的倒影效果
- 复现一篇分布式置换流水车间调度问题的代码——分布估计算法
- Windows ICS 服务无法启动问题解决方法
- openGL之API学习(二零三)GL_TEXTURE_WRAP_S GL_TEXTURE_WRAP_T
- gtx1650和gtx1060哪个好
- 线上流量突增百万高可用保障方案
- 实战 | CNN+BLSTM+CTC的验证码识别从训练到部署
- 详解CSS——display各个属性值(带例子)
- CST微波工作室学习笔记—4.T型波导分析2