持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天，点击查看活动详情
前情提要
单页面应用是目前最受欢迎的开发模式，也是前后端分离开发的主要产物之一。当前市场上的三大主流框架：Vue， React和Angular都是单页面应用(当然也都提供了对应的ssr服务端渲染的方式)。在单页面之前是多页面，每个页面都会对应一个html文件以及相对应的css文件和js文件。每个页面之间的调度或者说跳转的方式是通过a标签的跳转实现。那么作为单页面如何模拟处理多页面的调度呢？
单页面应用开发中的页面调度方式
显而易见的是，单页面应用开发中的页面调度方式是借鉴了后端的路由概念。后端的路由通常对应的是一个个接口。而前端的路由则是对应一个个页面级的组件。
而调度方式便是通过不同的路由地址匹配不同的组件然后进行渲染，老页面级组件则进行卸载消失。整个过程并不会触发浏览器的请求页面的操作。
路由的几种方式以及特点
- hash模式
- 表现：在浏览器的链接中会在域名和路由中间添加一个#。没错，跟以前的锚点强相关。
- 兼容：很多浏览器都支持该该模式，属于兼容性比较强的单页面路由模式了。
- 原理：主要依赖浏览器的onhashchange对路由改变时的监听
- histroy模式
- 表现：对比hash路由就是少了那个比较突兀的 # 号
- 兼容：兼容性差了点，对于ie低版本不是很友好。
- 原理：主要利用HTML5中History对象新增的pushState和replaceState两个方法。然后监听popstate事件，来实现动态加载页面级组件和卸载相关老页面组件。
- 注意：当调用pushState和replaceState的时候并不会触发popstate事件，当点击浏览器的前进后退，或者调用history的go或者goback的时候才会触发。
- 缺点：当刷新浏览器的时候或者路由地址没有出现在路由配置表里的时候便会出现404的情况。需要配置nginx或者后端做处理的方式才能实现。
- abstract模式
- 对于这个该模式，属于路由插件对浏览器的最后的包容了，对于上面的两种模式都有一定程度的兼容性，而abstract是为他们两个兜底的。如果hash和history都不能使用了，则路由插件会自动强制性使用该模式。所以该模式不用特别的去做些什么，一切自有插件处理。
