vue路由跳转出现空白页面情况

本文探讨了在使用webpack构建的前端项目中,由于路由配置问题导致页面刷新后出现空白的故障。重点分析了history模式下多级路由与静态资源加载路径的冲突,解释了为何二级及以上路由刷新时静态资源请求路径错误,以及如何通过调整webpack配置解决这个问题。同时,提醒开发者注意静态资源路径的相对性及其对路由的影响。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

路由页面跳转正常,但是刷新后页面空白不显示
报如下错误
在这里插入图片描述
查找原因发现是路由path写法问题由
由原来的二级路由改成了一级后页面正常显示
原因为是webpack一些内置配置后资源配置不正常。
在history模式下存在多级路由时,页面路由跳转是ok的,但当二级以上路由时,浏览器直接刷新页面会空白 * 当二级以上路由刷新时,浏览器控制台只会报错误,没有具体原因,这时你看network中静态资源请求,如果你的二级路由是“/system/permisson”,这时你会发现静态资源请求路径变成了”/system/app.js“,而静态资源实际上是“/app.js”才能找到,这是因为静态资源访问路径是按照相对路径访问的,你的路由如果是“/A/B/C”,静态资源加载路径就是/A/B/app.js * 这时候可能疑惑,我根本没设置过这个路径,那是因为webpack配置上给你设置了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值