单页面应用（SPA）
单页面应用程序将所有的活动局限于一个Web页面中，在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成，单页面应用不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，单页面应用可以提供较为流畅的用户体验。
因此不刷新浏览器，而通过感知地址栏中的变化来决定内容区域显示什么内容。要达成这个目标，所以我们要用到前端路由技术，具体来说有两种方式来实现：hash和history模式。
1.原理不同
hash模式的实现原理是通过监听hashChange事件来实现的。history模式是通过调用 history.pushState方法(或者replaceState) 并且 监听popstate事件来实现的。history.pushState会追加历史记录，并更换地址栏地址信息，但是页面不会刷新，需要手动调用地址变化之后的处理函数，并在处理函数内部决定跳转逻辑；监听popstate事件是为了响应浏览器的前进后退功能。
2.表现不同
hash模式会在地址栏中有#号，而history模式没有；由于history模式的实现原理用到H5的新特性，所以它对浏览器的兼容性有要求(IE >= 10)。
3.history模式特点
history模式开发的SPA项目，需要服务器端做额外的配置，否则会出现刷新白屏（链接分享失效）。原因是页面刷新时，浏览器会向服务器真的发出对这个地址的请求，而这个文件资源又不存在，所以就报404。处理方式就由后端做一个保底映射:所有的请求全部拦截到index.html上。
区别
1、history和hash都是利用浏览器的两种特性实现前端路由，history是利用浏览历史记录栈的API实现，hash是监听location对象hash值变化事件来实现
2、history的url没有’#'号，hash反之
3、相同的url，history会触发添加到浏览器历史记录栈中，hash不会触发，history需要后端配合，如果后端不配合刷新新页面会出现404，hash不需要
4、HashRouter的原理：通过 window.onhashchange 方法获取新URL中hash值，再做进一步处理 HistoryRouter的原理：通过 history.pushState 使用它做页面跳转不会触发页面刷新，使用 window.onpopstate 监听浏览器的前进和后退，再做其他处理
history 是刷新页面的方式，而 hash 是不刷新页面，只是重载 dom
最大的区别就是 hash 不需要后端支持，history 需要后端支持(history 模式在刷新页面时可能会出现显示空白等问题,需要后端做个重定向)，没有特别要求，一般都用 hash
hash 是通过url锚点实现的 切换路由时，network中的资源不再重新获取加载 有 #
history 切换路由时，network的资源会重新获取加载
可以在vue router实例化时，设置mode：history/hash/abstract(不常用) 默认 hash 模式
标签：vue,浏览器,模式,刷新,hash,history,页面 From： https://www.cnblogs.com/consoleloglxr/p/17807636.html