浅谈SPA单页面应用原理

设计理念/SPA优点

（1）前后端分离
后端只需要提供数据，一套后端程序代码可以应用于多种客户端
（2）减轻服务器的压力

（3）增强用户体验
不需要重新加载整个页面，获取数据通过异步的Ajax获取，没有页面之间的切换，页面流畅

SPA缺点
（1）首屏加载慢
解决

• Vue-router路由懒加载
• CDN加速
• 服务器渲染

（2）不利于SEO

SPA工作原理

（1）入口与页面相对应

（2）点击前进后退或其他控制回到页面

实现以上两个功能，主要有两种方法，History API和hash，二者实现原理一样，不过桥梁（方法）不同，下面来看看简易的实现

History API

注册路由主要通过两件事：执行动作（比如打开页面，这个并没有体现出来，主要模拟整个流程），创建历史记录：window.history.pushState(),他接收三个参数，第一个页面之间传递的参数，第二个页面的title，第三个真实的地址。
监听路由：当执行回退或者前进时会触发popstate。这里打印出location和state

hash

注册路由通过hash实现，监听路由时监听hashchange的变化，需要注意点击切换和后退前进时都会触发hashchange。