前言：写这个随笔是因为后端部署时，第一次进入页面无问题，刷新后页面空白，寻找原因发现有两个解决方案;1、后端nginx做保底映射，映射到正确的路径；2、前端更改为hash模式也可解决
1.原理不同。
2.表现不同。
3.history模式特点
总结
单页应用是在移动互联时代诞生的，它的目标是不刷新浏览器，而通过感知地址栏中的变化来决定内容区域显示什么内容。要达成这个目标，我们要用到前端路由技术，具体来说有两种方式来实现：hash模式和history模式。
不同之处有三点。
1.原理不同。
hash模式的实现原理是通过监听hashChange事件来实现的，前端js把当前hash地址对应的组件渲染到浏览器中。history模式是通过调用 history.pushState方法(或者replaceState) 并且 监听popstate事件来实现的。history.pushState会追加历史记录，并更换地址栏地址信息，但是页面不会刷新，需要手动调用地址变化之后的处理函数，并在处理函数内部决定跳转逻辑；监听popstate事件是为了响应浏览器的前进后退功能。
2.表现不同。
hash模式会在地址栏中有#号，而history模式没有；同时由于history模式的实现原理用到H5的新特性，所以它对浏览器的兼容性有要求(IE >= 10)。
3.history模式特点
history模式开发的SPA项目，需要服务器端做额外的配置，否则会出现刷新白屏（链接分享失效）。原因是页面刷新时，浏览器会向服务器真的发出对这个地址的请求，而这个文件资源又不存在，所以就报404。处理方式就由后端做一个保底映射:所有的请求全部拦截到index.html上。
总结
单页应用是在移动互联时代诞生的，它的目标是不刷新整体页面，通过地址栏中的变化来决定内容区域显示什么内容。要达成这个目标，我们要用到前端路由技术，具体来说有两种方式来实现：hash模式和history模式。hash模式是通过监听hashChange事件来实现的，history模式是通过pushState方法+popstate事件来实现的。
————————————————
版权声明：本文为CSDN博主「前端小刘~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_62930485/article/details/123491635