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

2024年3月27日 195次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞