vue单页面应用使用 history模式路由时刷新页面404的一种可能性

9 篇文章 2 订阅
3 篇文章 0 订阅
文章讲述了在将路由模式从hash模式改为history模式后,由于接口前缀与页面路由冲突,导致页面刷新时组件无法正确渲染。作者发现并解决了这个问题,提供了两种可能的解决方案:一是为接口添加不同前缀并重新配置Nginx,二是修改页面路由前缀以避免冲突。
摘要由CSDN通过智能技术生成

原先使用的是 hash模式路由,因为要结合qiankun进行微前端改造,改成了 history模式,结果页面刷新之后没有正确渲染组件。按照一般思路检查 nginx配置 try_files $uri $uri/ /index.html;也配置上了,还是有问题。

页面异常显示

在这里插入图片描述

问题原因

后来又仔细排查了一下nginx配置,发现了一点值得怀疑的异常:在接口转发配置中,其中一个接口前缀竟然跟页面路由前缀重复了。把这项配置去掉,再部署刷新页面,果然没问题了。

解决办法

根据实际项目修改工作量评估选择修改方式:
方法1: 在这批接口url前添加一个和页面路由前缀不同的自定义前缀,在 nginx配置中对这个前缀重新配置转发
方法2: 或者,直接修改页面路由的前缀

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值