设计理念/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。