hash路由和history的区别（10）

单页面应用是在移动互联网时代诞生的,它的目标是不刷新浏览器,而通过感知地址栏中的变化来决定内容区域显示什么内容。要达成这个目标，我们要用到前端路由技术,具体来说有两种方式来实现: hash模式和history模式。

不同之处有三点。

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

history模式是通过调用history.pushState方法(或者replaceState)并且 监听popstate事件来实现的。history.pushState会追加历史记录,并且更换地址栏地址信息,但是页面不会刷新,需要手动调用地址变化之后的处理函数，并在处理函数内部决定跳转逻辑；监听popstate事件是为了响应浏览器的前进后退功能。

二是表现不同。hash模式会在地址栏中有#号，而history模式没有;同时由于history模式的实现原理用到H5的新特性,所以浏览器的兼容性有要求(IE>=10)。

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

四.SPA 全称 Single Page Application，即单页面应用。一般也称为 CSR（Client Side Render），即客户端渲染。它所需的资源，如 HTML、CSS 和 JS 等，在一次请求中就加载完成，也就是不需刷新地动态加载。浏览器(Client)渲染顾名思义就是所有的页面渲染、逻辑处理、页面路由、接口请求均是在浏览器中发生。对于 SPA 来说，页面的切换就是组件或视图之间的切换。
简单来说,SPA应用程序只有一个html文件,在vue中可以通过vue-router来局部切换组件,而非刷新整个页面,来实现无刷新切换页面的技术。