SPA单页应用

单页网页只有一个index.html，页面视图的切换通过JS逻辑实现。在HTML结构中有一个占位DOM元素负责承载切换的视图.可以理解为一个动态显示不同内容的DOM。

SPA的实现基础

• 保证只有一个HTML页面，且用户交互时不会刷新和跳转页面。为SPA中的每个视图展示形式匹配一个特殊的URL。在游览器的刷新、前进、回退都通过这个特殊的URL实现。

• 改变URL且不让游览器向服务器发送请求。

• 同时可以监听的URL的变化

如今借助location.hash和history.pushState可以实现 它们分别对应着如今路由模式中的--Hash模式--和--History模式--

Hash模式

Hash是什么

URL路径中可以存在锚点，通过一个符号 # 表示,当URL存在锚点的时候，锚点后面的字符串在请求时不会传给服务器，仅仅作为本地游览器数据访问，这个值称为**Hash值**

Hash实现页面跳转

通过location.hash属性可以更改页面的Hash,并且不会刷新页面值改变URL路径,当Hash改变的时候,会触发一个hashchange事件，可以通过监听hashchange事件去变更页面视图的内容。 同时，当页面1改变的时候，也会想游览器的访问历史添加一个记录，所以也可能通过history.go()去控制页面访问历史

History模式

History的发展

在HTML5前,history只能用于多页面的跳转。 而在HTML5的规范中，history新增了几个API

  history.pushState() //添加新的状态到历史状态栈
  history.replaceState() //用新的状态代替当前状态  
/**
@description: ...
@param: state  合法的JS对象,可以用在pushState事件中
@param: title 现在大多数游览器忽略这个参数,可以用null代替
@param: url 任意有效的URL，用于更新游览器的地址栏
*/

  history.state //返回当前的状态
  

History模式存在的问题

虽然在我们通过history.pushState和history.replaceState进行路由跳转更改history.state的时候不会触发页面刷新，但是当用户手动刷新又或者通过URL直接进入应用时,服务端是无法正确识别这个URL,因为在SPA单页应用只有一个index.html,URL地址出现变更在服务器是找不到资源的会出现404,所以需要在服务端进行默认配置,如URL匹配不到任何资源即默认指向单页应用的HTML文件也就是index.html。当然具体怎么设置根据需要进行决策。

两种模式的取舍

Hash模式兼容性更好、而且不需要在服务端进行配置，但是游览器地址会带有#号，看起来可能不美观。并且页面锚点功能失效(不怎么遇到需要锚点功能)。对SEO不优化。 History模式相比较兼容性较差，但是如今这点差异可忽略。游览器地址栏看起来更规整，更符合我们使用多页应用的习惯并且对SEO的适配很好。但是需要在服务端中进行配置。 总结: 一般来说,不需要SEO的页面用Hash更省心。 结合实际来说:

• TO B 诸如后台管理系统使用Hash较多
• TO C 保证使用量和搜索引擎排序，History更受欢迎。

补充

• Hash模式下,通过hashchange事件监听URL变化,结合DOM操作去更新页面。
• History模式下,通过popstate事件来捕获URL的变化,并通过pushState去改变当前的URL同时保持页面不刷新。结合结合DOM操作去更新页面。