单页面应用(SPA)&&前端路由hash 模式 VS history 模式

蔚落 2023-01-17 08:45 188阅读 0赞

### 文章目录 ###

*  单页面应用(SPA)
 *  前端路由的由来
 *  前端路由
 *  hash 模式
 *  history 模式
 *  hash、history优缺点

# 单页面应用(SPA) #

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

# 前端路由的由来 #

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

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

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

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

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

# 前端路由 #

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

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

1.  改变 url 且不让浏览器像服务器发送请求。
2.  可以监听到 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 改变后的新 url
        let 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_juejin.cn_post_6844903890278694919]  
[https://www.jianshu.com/p/b47410992328][https_www.jianshu.com_p_b47410992328]

[本文链接https://blog.csdn.net/qq\_39903567/article/details/116228109][https_blog.csdn.net_qq_39903567_article_details_116228109]

[MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/History_API
[window.onpopstate]: https://developer.mozilla.org/zh-CN/docs/Web/API/WindowEventHandlers/onpopstate
[https_juejin.cn_post_6844903890278694919]: https://juejin.cn/post/6844903890278694919
[https_www.jianshu.com_p_b47410992328]: https://www.jianshu.com/p/b47410992328
[https_blog.csdn.net_qq_39903567_article_details_116228109]: https://blog.csdn.net/qq_39903567/article/details/116228109