单页面应用(SPA)

简单的说 SPA 就是一个WEB项目只有一个 HTML 页面，一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JS 动态的变换 HTML 的内容，从而来模拟多个视图间跳转。

前端路由的由来

最开始的网页是多页面的在不同的HTML 页面间跳转，直到 Ajax 的出现，才慢慢有了 SPA。

SPA 的出现大大提高了 WEB 应用的交互体验。在与用户的交互过程中，不再需要重新刷新页面，获取数据也是通过 Ajax 异步获取，页面显示变的更加流畅。

但由于 SPA 中用户的交互是通过 JS 改变 HTML 内容来实现的，页面本身的 url 并没有变化，这导致了两个问题：

SPA 无法记住用户的操作记录，无论是刷新、前进还是后退，都无法展示用户真实的期望内容。
SPA 中虽然由于业务的不同会有多种页面展示形式，但只有一个 url，对 SEO 不友好，不方便搜索引擎进行收录。

前端路由就是为了解决上述问题而出现的。

前端路由

简单的说，就是在保证只有一个 HTML 页面，且与用户交互时不刷新和跳转页面的同时，为 SPA 中的每个视图展示形式匹配一个特殊的 url。在刷新、前进、后退和SEO时均通过这个特殊的 url 来实现。

为实现这一目标，我们需要做到以下二点：

改变 url 且不让浏览器像服务器发送请求。
可以监听到 url 的变化

前端路由有 hash 模式和 history 模式

hash 模式

这里的 hash 就是指 url 后的 # 号以及后面的字符。比如说 “www.baidu.com/#hash” ，
其中 “#hash” 就是我们期望的 hash 值。
由于 hash 值的变化不会导致浏览器像服务器发送请求，而且 hash 的改变会触发 hashchange 事件，浏览器的前进后退也能对其进行控制，所以在 H5 的 history 模式出现之前，基本都是使用 hash 模式来实现前端路由。

使用到的API:

window.location.hash = 'hash字符串'; // 用于设置 hash 值let hash = window.location.hash; // 获取当前 hash 值// 监听hash变化，点击浏览器的前进后退会触发
window.addEventListener('hashchange', function(event){ let newURL = event.newURL; // hash 改变后的新 urllet oldURL = event.oldURL; // hash 改变前的旧 url
},false)

history 模式

在 HTML5 之前，浏览器就已经有了 history 对象。但在早期的 history 中只能用于多页面的跳转：

history.go(-1);       // 后退一页
history.go(2);        // 前进两页
history.forward();     // 前进一页
history.back();      // 后退一页

在 HTML5 的规范中，history 新增了以下几个 API：

history.pushState();         // 添加新的状态到历史状态栈
history.replaceState();      // 用新的状态代替当前状态
history.state                // 返回当前状态对象

来自MDN的解释：

HTML5引入了 history.pushState() 和 history.replaceState()
方法，它们分别可以添加和修改历史记录条目。这些方法通常与window.onpopstate 配合使用。

window.onpopstate:

每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发.
如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的,
则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝.

无论是浏览器的前进还是后退都会触发这个popstate事件，所以可以起到一个监听页面变化的作用。

history.pushState() 和 history.replaceState() 均接收三个参数（state, title, url）
参数说明如下：

state：合法的 Javascript 对象，可以用在 popstate 事件中
title：现在大多浏览器忽略这个参数，可以直接用 null 代替
url：任意有效的 URL，用于更新浏览器的地址栏

由于 history.pushState() 和 history.replaceState() 可以改变 url 同时，不会刷新页面，所以在 HTML5 中的 histroy 具备了实现前端路由的能力。

hash、history优缺点

hash 模式优点：

兼容性更好，可以兼容到IE8
无需服务端配合处理非单页的url地址

hash 模式缺点：

看起来更丑。
会导致锚点功能失效。
相同 hash 值不会触发动作将记录加入到历史栈中，而 pushState 则可以。
搜索引擎对带有hash的页面不友好
带有hash的页面内难以追踪用户行为

history优点：

路径看起来比较好看，没有井号 #
对搜索引擎友好
方便统计用户行为

history缺点：

兼容性不如 hash
需要服务端支持，否则一刷新页面就404了

当使用HTML5 history，刷新页面时会出现404。是因为当前url服务端无法找到，
所以，要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，
则应该返回同一个 index.html 页面，这个页面就是 app 依赖的页面。
(服务端在接受到所有请求后，都指向index.html文件，或设置404页面为index.html。不然刷新时页面会出现404。)

参考：
https://juejin.cn/post/6844903890278694919
https://www.jianshu.com/p/b47410992328

本文链接https://blog.csdn.net/qq_39903567/article/details/116228109