背景

页面的url变了，页面部分DOM也切换隐藏或者显示，但是不要有浏览器刷新的效果。就像是vue，react里面的局部刷新差不多。

传统的思路是url变了，浏览器会重新发起请求，页面进行刷新。但是这个在单页面中，就会变的特别奇怪，用户体验很不好。在单页面应用中都是路由改变了，浏览器本身不做任何操作，不会发起请求，而实现这个效果的基石是h5的history.pushState和history.replaceState

实现效果

唠嗑两句，工作两年了，越来越发现自己的无知与渺小，行业的冰山一角我都尚未触及。路漫漫其修远兮，吾将上下而求索

实现思路

1. 元素的显示隐藏时给路由加一个参数，记录当前的状态 => history.pushState({},"",'?type=right')

2. 路由在哪一个状态就显示，某一块元素 => this.main.classList.add('hidden') this.rightContentBox.classList.remove('hidden')

3. 浏览器导航栏的前进后退，触发页面的显示隐藏 =>

window.addEventListener("popstate",()=>{
			this.eleStateHandle()
		})

1. 页面刷新or重新加载的时候，根据路由参数进行显示or隐藏

window.addEventListener('load',()=>{
			this.eleStateHandle()
		})

在线demo

建议代码copy出来，建一个html，看看效果

页面搜索框的内容带到页面路由上，方便发送分享给小伙伴的时候带上搜索的结果。原理是一样的路由搜索带参数

hash模式和history模式的区别

hash模式和history模式都是前端路由模式，而只是改变了浏览器的 URL。通过地址栏中的变化来决定内容区域显示什么内容，不刷新页面

hash模式会在地址栏中有#号，而history模式没有。

hash模式的实现原理是通过监听hashChange事件来实现

history模式是通过调用 history.pushState方法(或者replaceState) 并且 监听popstate事件来实现的

history模式开发的SPA项目，需要服务器端做额外的配置，否则会出现刷新白屏（链接分享失效）。原因是页面刷新时，浏览器会向服务器真的发出对这个地址的请求，而这个文件资源又不存在，所以就报404。处理方式就由后端做一个保底映射:所有的请求全部拦截到index.html上。

浏览器为什么支持单页面路由呢？

HTML5 增加了 history API，使得前端可以使用 JavaScript 来操作浏览器的历史记录，使用 pushState() 和 replaceState() 方法可以动态地更改 URL 地址，同时不会导致页面的刷新。这使得单页面应用变得更为可行，可以使用 URL 来实现页面之间的导航和路由。

前端框架（如 Vue、React、Angular 等）都提供了内置的单页面路由功能，通过组件化开发，实现页面内容与 URL 地址的同步变更。它们根据 URL 中的路径信息来加载对应的组件和数据，实现了前后端分离和无刷新切换的体验。同时，前端路由还可以搭配 Webpack 或者 Rollup 等打包工具进行懒加载，提高页面的加载速度和用户体验。

综上所述，浏览器支持单页面应用路由是因为现代浏览器提供了更多的前端 API，同时前端框架提供了完善的单页面路由方案，使得前端能够使用 URL 来实现页面之间的导航和路由。这样，前端就可以更好地负责页面的渲染和逻辑的处理，提高开发效率和用户体验。

相关文档

hashchange： hash 发生变化时监听的事件

onpopstate: 当前页面的路由但并没有离开这个页面监听的事件，一般是由history.pushState(), history.replaceState() 方式改变路由（简单说就是在当前路由后面添加参数）

popstate:点击浏览器回退或者前进按钮的时候会触发这个事件。history.pushState()或history.replaceState()不会触发popstate事件但是这两个方法可以实现路由上面加参数，实现路由变化而刷新页面。通过pushState跳转的路由，点击浏览器的回退按钮页面没有变化，此时就需要配合popstate事件实现，但页面路由跳转无刷新了

单页面应用history路由实现原理