Hash routing and history routing

There are two types of routing:

Hash mode :

url后面的有一个#,#后面的字符串,叫hash值,也叫锚点。
    1)hash 值变化不会导致浏览器向服务器发出请求
    2)hash 改变会触发 hashchange 事件 当hash值变化了,就会触发事件
    3)在 html5 的 history 出现前,基本都是使用 hash 来实现前端路由的
    4)由于hash路由,有个#,有人说比较丑
    5)hash值变化,也会引起,浏览器的前进和后退
    6)相对于history来说,hash的兼容性更好一点
    7)hash本来是拿来做页面定位的,如果拿来做路由的话,原来的锚点功能就不能用了

Method of initiating hash:

 window.location.hash = "position"

history mode:

 hash 的传参是基于 url 的,如果要传递复杂的数据,会有体积的限制,而 history 模式不仅可以在url里放参数,还可以将数据存放在一个特定的对象中。
    1)history传参比hash传参再有优势
    2)使用http协议
    3)history模式,会向后端发起请求,所以说,需要后端配合,不然可能会出现404

Method of initiating history:

history.pushState({ id }, null, id),里面有很多种方法

The difference between hash routing and history routing

1. The hash route has # on the URL of the address bar, and the history route will look better without it

2. We perform the press enter refresh operation, the hash route will be loaded to the page corresponding to the address bar, and the history route will generally report a 404 error (refresh is a network request, and an error will be reported when there is no back-end preparation).

3. Hash routing supports lower version browsers, and history routing is a new API for HTML5.

4. The characteristic of hash is that although it appears in the URL, it is not included in the http request, so it has no effect on the backend, so changing the hash will not reload the page, so it is also a must for single-page applications .

5.history uses the browser’s history stack. Previously, there were back, forward, and go methods. Later, pushState() and replaceState() methods were added to HTML5 (requires specific browser support). They provide history Record the modification function, but when the modification is made, although the current URL is changed, the browser will not immediately send a request to the backend.

Guess you like

Origin blog.csdn.net/QZ9420/article/details/112547239