01、什么是前端路由？
前端路由的一个大背景就是当下流行的单页应用SPA，一些主流的前端框架，如vue、react、angular都属于SPA，那什么是SPA呢？
1.1、SPA
SPA（single-page application）单页面应用，就是浏览器只加载了一个URL地址，一个页面，应用的所有功能、交互都在这个页面内进行。而实现单页面应用的基础就是ajax，通过异步请求动态的切换页面内容、实现交互，页面整体没有刷新。这避免了页面URL跳转，用户体验也不会中断，就像原生应用一样，体验比较好。越来越多的系统在使用SPA，尤其是WebApp中使用广泛。
与SPA单页应用对应的就是多页应用MPA，当然两者不是非此即彼的，主要基于业务需求，是可以共存的。
| 区别 | 单页面应用（SPA） | 多页面应用（MPA） |
|---|---|---|
| 页面组成 | 一个主页，包含多个页面片段 | 多个主页面 |
| 刷新方式 | 局部刷新 | 整页刷新 |
| url模式 | hash哈希模式 、history历史模式 |
history历史模式 |
| SEO搜索引擎优化 | 难实现，采用页面静态化方式优化 | 容易实现 |
| 数据传递 | 同一应用内，容易 | 通过url、cookie、localStorage等传递，复杂 |
| 渲染性能 | 首次加载资源多稍慢，切换快，体验良好 | 切换加载资源，速度慢，用户体验差 |
| 转场动画 | 容易实现 | 好像实现不了 |
| 维护成本 | 相对容易 | 相对复杂 |
SPA的主要表现就是更新视图而不重新请求页面，要实现前端的页面的自主路由控制，而不会刷新页面，涉及两种主流的技术：hash模式、history模式，这算是前端路由的核心原理，简单了解一下吧！
1.2、#hash路由原理
hash（ /hæʃ/ ）是URL地址中#号后面的内容（包括#），原本的作用是用于HTML页面内部定位的描点，描点的变化不会导致页面重新加载。HTTP请求中也不会带#，所以刷新也不影响，这是浏览器端的本地行为。
- 页面不刷新：
hash的变化不会刷新页面，只会触发浏览器定位锚点，这是hash实现前端路由的基本原理。 - 获取
hash：window.location.hash hash变更事件：window.hashchange监听hash变化。- 不同的
hash会进入浏览器历史记录。
所以，实现过程就比较简单了！
❶ 监测hash变化：通过hashchange事件监测hash变化 。
❷ 加载资源：根据hash值匹配不同资源进行加载、切换，在Vue中切换的其实就是不同的组件。
