前端路由与后端路由的思考

2024年3月15日 352次阅读 来源: booder

后端路由

* path（路由分发）
    针对不同的路由对应不同的回调函数处理(req, res, next)
    * req;获取请求参数
    * res：返回请求数据
    * next: 调用后续的回调函数

前端路由

* 路由是根据不同的url去请求不同的页面内容
* 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据url不同返回不同的页面来实现。
* 利用H5的history.pushState 和 history.replaceState ，这两个history新增的api，为前端操控浏览器历史栈提供了可能性
* 这两个Api都会操作浏览器的历史栈，而不会引起页面的刷新。
* 不同的是，pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录。
应用：单页面应用
优点和缺点：
    * 优点： 用户体验好，不需要每次向服务器发送请求请求页面数据，响应快
    * 缺点：使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存，

hash值得由来

历史：
    1、基于Ajax 的 Web 应用最为明显的特征在于使用了浏览器内部原生支持的 XMLHttpRequest对象与后台服务器进行数据通。
    2、由于这种通信方式不需要页面的刷新动作，因而无论与后台发生了多少次通信，浏览器的 URL 会一直保持在初始地址不变。
    3、这随之而来的一个问题便是不断变化的页面状态信息无法记录到浏览器的历史记录堆栈中，从而使得用户无法通过浏览器的前进 / 后退按钮在不同状态页面间进行切换。

解决思路：

浏览器能够支持在用户访问过的页面间进行前进 / 后退的操作，依赖于内部维持的 history 对象。
出于安全性的考虑，浏览器并不允许 JavaScript 脚本对该对象进行增删改之类写操作，
而只是可以通过 history. back/forward() 等方法进行访问。既然在页面状态发生变化时，
无法通过脚本直接去影响浏览器的历史信息，那么只有通过 URL 的变化来触发浏览器增加一条新的历史记录。
这也就是说需要将 Ajax 应用的不同页面状态与 URL 进行一种一对一的映射，并且能够在回退或前进到某一 URL 之时，
应用本身能够在页面无刷新的情况下跳转到正确的页面状态。如何对 Ajax 应用的初始 URL 进行改变，
而同时这种变化的切换又不会引起页面的重新加载呢？答案只有一个，那就是借助用于页面内资源片段定位目的
的“片段标识符”（fragment identifier），即 URL 中“#”符号后的字符串（hash string）。当浏览器向
服务器端请求资源时，片段标识符并不会连同 base URL 一同发往服务器端，而只是在得到服务器返回的结果
之后帮助浏览器快速定位到被相应的锚点（anchor）所标识的资源片段，即使无法找个对应的锚点，浏览器也并
不会报错。正是基于浏览器的这一特性，构建片段标识符与页面状态之间的映射关系成为了解决此类问题的基础。

  • hash值

    • 将任意长度的二进制字符串通过一定的算法映射成一个固定长度的较小二进制字符串，这个字符串就是对应的hash值，主要特点就是唯一的，不可逆的。

  • 前端路由的hash值(#)—–>angular

    • hash通常应用在spa单页面应用中。因为通过不同的hash值映射的url来是的浏览器添加一条不同的url历史记录。

    • 通过浏览器的pushstate、replaceState来操作，请求不同的浏览器记录达到请求不同的页面的效果

    • H5中提供的两个操作hash值得API来操作hash值

    • window.location.hash读取#值

    • window.onhashchange = func 监听hash改变

    原文作者：booder
    原文地址: https://segmentfault.com/a/1190000010401337
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞