HTML5 History 模式的坑

最新推荐文章于 2025-06-25 14:56:05 发布
原创 最新推荐文章于 2025-06-25 14:56:05 发布 · 2.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

作者在周五更新代码后遇到Logo消失及页面加载失败的问题。在本地开发环境下一切正常，但部署后出现问题，原因是使用了Router的history模式，导致资源路径错误。

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

周五下班前更新了一下代码，结果一更，出现了一个bug！

 

现象1：有一两个页面的Logo不见了...

 

于是打开Console，查看资源的请求情况，发现请求正常且成功。

这时候又在调试的过程中发现了第二个问题。

现象2：刷新一下，页面无法渲染，并报错各种资源的丢失，无法正常加载。

但是在本地开发的时候，一切资源正常，刷新也不会出现无法加载的问题，一般大家看到这里大概就会发现这是Router的问题，而事实上也是当时看到地址栏上的“#”不顺眼，于是就想切换成history模式，于是加了一行代码。

mode: 'history',
官网有一句话说，“不过这种模式（history）要玩好，还需要后台配置支持。”

这也导致了，在某些资源的请求上，会无法正确获取资源的路径。

 

 

Vue路由history模式采坑：Nginx配置Vue项目刷新页面404
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
05-31 1378
最近部署Vue项目时，刷新页面报404问题
【高频考点精讲】前端路由原理剖析：hash与history模式的区别和实现细节全解
全栈老李的博客
05-05 928
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。今天咱们聊聊前端路由这个老生常谈但又极其重要的知识点。我是全栈老李，一个喜欢把复杂问题讲简单的技术博主。路由这东西，说简单也简单，说复杂也复杂，关键看你怎么理解。
HTML5新特性之History
LiuHe
04-23 6591
几年前，Ajax的兴起给互联网带来了新的生机，同时也使用户体验有了质的飞跃，用户无需刷新页面即可获取新的数据，而页面也以一种更具有交互性的形式为用户展现视图，可以说这种变化对互联网发展的贡献是史无前例的。 但随着Ajax大规模应用，越来越多的开发人员开始注意到其中存在的问题，因为Ajax的视图展现是在页面无刷新情况下进行的，这也就意味着在用户做了一系列操作之后，页面的URL是没有任何变化的，这些
nginx 配置支持URL HTML5 History 模式 与 设置代理
dicha7140的博客
09-13 277
拾人牙慧：https://segmentfault.com/q/1010000007140360 nginx 配置支持URL HTML5 History 模式 location / { try_files $uri /index.html; } location ^~ /api/ { proxy_pass http://192.168.8.184:8...
Vue 3 路由模式全解 + 部署实战指南
最新发布
deary
06-25 1014
本文介绍了 Vue Router 在 Vue3 项目中的三种历史模式：Hash模式（URL含#号，简单易用）、History模式（基于HTML5 API，URL美观）和Memory模式（仅内存使用）。重点对比了各模式的优缺点及适用场景，特别是History模式在生产环境使用时需配置服务器fallback以避免刷新404问题。文章还提供了Nginx、Apache和Node.js的服务端配置示例，并针对常见问题进行解答。最后给出项目建议：开发阶段使用History模式测试，部署时配置服务器rewrite规则，并
Html5使用history对象history.pushState()和history.replaceState()方法添加和修改浏览历史记录
热门推荐
u012028371的博客
03-28 9万+
原文：https://www.studyscript.com/Post/index/id/3018.html?page=3 正文~ 概述 浏览器窗口有一个history对象，用来保存浏览历史。 如果当前窗口先后访问了三个网址，那么history对象就包括三项，history.length属性等于3。 history.length // 3
记一次Vue使用History模式的踩坑
a1543070977的博客
01-05 1万+
Vue的History模式和Hash模式的区别 简单说Hash模式是会带有#号的，浏览器向服务端发送请求时，只会把#前的链接发送给服务端，所以后端同学并不需要处理，并且页面可以刷新不会返回404之类的恶心页面。是不是感觉很方便呢~ 但是这个#号往往会给我们来带一些奇怪的bug，比如生成二维码的时候会自动过滤掉#后面的参数啊，微信登录，已经分享的时候都会把#后面的参数或者路径都过滤掉，这样我们就很不...
记录vue-router history模式 采坑
qq_32900003的博客
05-11 990
vue路由有 hash(浏览器环境) 、abstract(Node.js 环境)、history(Html5模式)三种方式。 默认mode为hash,支持所有浏览器，缺点（url路径为有#号） history 模式，依赖后端配置，详细配置地址 history 模式打包之后的本地文件，浏览器不能访问 使用history模式，没有后台依赖，会出现打包放在服务器之后浏览器刷新404，跳转404等问题 ...
vue-router的HTML5 History 模式设置
01-19
vue-router的HTML5 History 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 const router = new VueRouter({ mode: 'history', routes: [...] }) 当你使用 history 模式时...
浅谈vue项目4rs vue-router上线后history模式遇到的坑
10-17
然而，这种模式在上线后可能会带来一些坑，尤其是在SEO（搜索引擎优化）和服务器配置方面。 在`hash`模式下，路由的变化并不会导致浏览器向服务器发起新的请求，因此可以直接通过修改`index.html`的`<base href>`...
html5 api 兼容,不同浏览器兼容性问题 HTML5中的history API的理解和使用
weixin_34983902的博客
06-20 547
如今前端框架层出不穷，大大的方便了我们平常工作中的开发，提高了开发的效率，然而，在使用框架的过程中还是很有必要了解其中一些自己感兴趣的功能的原生js实现方式。我一直对如今一些框架的路由感兴趣，今天就来讲讲我在前端路由的学习心得。何为路由？我的理解是在不刷新页面的情况下，通过更改页面的url来执行不同的程序操作，常见的前端路由实现方式有：1，通过hash实现(在url后面加入#+路由名)，使用has...
HTML5 history详解
哒哒哒
06-11 5475
最近研究vue-router单页转跳而不向服务器请求的原理， 主要是HTML5 history以及hash的应用，支持history时使用history模式 下面详细学习了一下常用的history相关的API 常用API： 1.history.length： 返回当前页面所产生的历史记录个数，即在同一个浏览器tab下产生的历史记录； 2.history.pushState(state,...
HTML5-原生History
wangyuegyq的博客
11-16 1744
而对于通过 history.pushState() 或 history.replaceState() 改变的历史记录，点击浏览器的后退键或前进键页面是没有反应的，那该如何控制页面渲染呢？使用的时候，可以为popstate事件指定回调函数，回调函数的参数是一个 event 事件对象，它的 state 属性指向当前的 state 对象；跳转到相应的历史记录，以当前历史记录为标准线0，回到之前历史记录，为负值，比如回到上一页，n就是-1，向后，就是正值，如果n === 0，相当于刷新当前页面。
nginx导致vue设置history模式下的请求丢失参数
weixin_44457062的博客
07-26 2737
在一次生产环境中，vue使用history模式在访问地址的参数会丢失，地址栏也会变成没有参数的地址，并且请求会发生301重定向。最后，发现vue从history模式改成hash模式可以解决参数丢失。但是产生301是nginx的问题，发现nginx配置的try_files有问题，所以会导致丢参数，try_files的配置是为了适配history模式。而nginx默认支持hash模式，不需要额外的配置，所以nginx默认hash是没有问题。最终，发现更改nginx的try_files也能让history模式的访
html中history的属性,HTML5中的History对象
weixin_31261145的博客
06-04 870
HTML5标准之前基本操作1.forward(number) 加载histroy列表中的下一个URL2.back(number) 加载histroy列表中的上一个URL3.go(number) 根据当前所处的页面，加载 history 列表中的某个具体的页面。例子:前进(加载histroy列表中的下一个URL)当下后退(加载histroy列表中的上一个URL)想去哪就去哪的gofunction f...
HTML5的History API介绍
prpjava2011的专栏
12-27 1876
HTML5的History API介绍 既实现了局部刷新,又修改了浏览器地址,并却做到了前进后推的效果 这其实是HTML5 History API实现的效果 其技术叫 pjax : pushState + ajax   而在JavaScript MVC开始流行之后，通过刷新来修改URL的方法，不禁让人感到烦躁。 然而HTML5中就制定了一个这样的API，可以通过方法的方
深入理解 HTML History 对象
levin blog
04-28 432
深入理解 HTML History 对象深入理解 HTML History 对象环境搭建History 对象介绍参考 深入理解 HTML History 对象 环境搭建 安装包 mkdir example-window-history cd example-window-history yarn init -y yarn add http-server 添加如下内容到 package.js...
html5 history新特性精简易懂介绍
03-15 940
由于我刚刚写博客没有多久,写博客的技术还不是很强,在一些方面可能写的不是特别到位,如果你有什么疑问或者有什么没讲,可以在底下留言,我都会一一回复的~~ 一 history和ajax无刷新操作 利用HTML5 History API可以实现页面的无刷新跳转,而在以前是没有技术可以达到这点的,Ajax虽然可以实现页面的无刷新操作,但是分页时url地址并不会改变,不利于有所引擎优化而在h5里面并且不
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值