hash和history两种模式的区别

两种模式的区别

1.hash 就是指 url 尾巴后的 # 号以及后面的字符,history没有带#,外观上比hash 模式好看些
3.hash模式在每次刷新页面时是直接更改“#”后的东西,history每次刷新会重新像后端请求整个网址,也就是重新请求服务器。如果后端没有及时响应,就会报错404!
3.hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.abc.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理,将返回 404 错误, 总结:虽然hash路径出现在URL中,但是不会出现在HTTP请求中,对后端完全没有影响,因此改变hash值不会重新加载页面,基本都是使用 hash 来实现前端路由的。

路由的实现原理

hash原理:hash通过监听浏览器的onhashchange()事件变化,查找对应的路由规则
istory原理: 利用H5的 history中新增的两个API pushState() 和 replaceState() 监听URL变化

一. URL的hash
URL的hash也就是锚点(#), 本质上是改变window.location的href属性.我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新
在这里插入图片描述
二.HTML5的history模式
history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面.
1.history.pushState()

在这里插入图片描述
2.history.replaceState()
3.history.go()
4.history.back()
5.history.forward()

猜你喜欢

转载自blog.csdn.net/weixin_46852620/article/details/113527702