BASE 理论

力扣(leetcode) 11. 盛最多水的容器 (短板木桶原理详解)

  返回  

前端路由方式—Hash路由和History路由

2021/7/21 9:23:41 浏览:

        SPA单页面项目厉害的地方之一就是切换路由时不会发送http请求到服务端,而是在客户端渲染,这就需要引入前端路由,也就是浏览器的hash或history属性。

        

hash :

hash ,url中带有#  路由即#后面的部分。虽然出现在 URL 中,但不会被包含在 http 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面,也不会发送http请求。

当hash改变时,会触发hashchange事件,监听该事件,对页面进行更新。如果请求了一个不存在的页面则会返回一个空白页面

history :

history 利用了 html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈,在当前已有的 back、forward、go 基础之上,它们提供了对历史记录 修改的功能(pushState将传入url直接压入历史记录栈,replaceState将传入url替换当前历史记录栈)。

当它们执行修改时,虽然改变了当前的 URL ,但浏览器不会立即向后端发送请求。而是先匹配自己配置的组件路由,如果存在则不会发送HTTP请求,如果不存在则会请求HTTP返回404页面,也可以自己提前配置好如果访问路由不存在就进入其他自定义页面。

history 对比  hash 

优势:

pushState 设置的 url 可以是同源下的任意 url ;而 hash 只能修改 # 后面的部分,因此只能设置当前 url 同文档的 url。

pushState 设置的新的 url 可以与当前 url 一样,这样也会把记录添加到栈中;hash 设置的新值不能与原来的一样,一样的值不会触发动作将记录添加到栈中。

pushState 通过 stateObject 参数可以将任何数据类型添加到记录中;hash 只能添加短字符串。

pushState 可以设置额外的 title 属性供后续使用。

劣势:

history 在刷新页面时,如果服务器中没有相应的响应或资源,就会出现404。因此,如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

hash 模式下,仅 # 之前的内容包含在 http 请求中,对后端来说,即使没有对路由做到全面覆盖,也不会报 404。


 

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号