前端路由hash history

一眨眼就四月份啦~~~暴击!!三月的面试没有很顺利,,,感觉运气也蛮重要的,,目前只有cvte的offer,希望四月冲鸭!!!!大厂!!快看我!

知识储备

ajax

  • 异步数据请求不刷新页面

单页面应用

  • 页面交互不刷新,连路由跳转也不刷新

1. 后端路由:

  • 好处:安全性好,SEO好。
  • 缺点:加大服务器的压力,不利于用户体验,代码冗合。

2. 前端路由:

  • 缺点:使用浏览器的前进,后退键时会重新发送请求,来获取数据,没有合理地利用缓存

前端路由 Hash History

hash

  1. hash(url中#后面的部分)虽然出现在url中,但不会包含在http请求中,对后端完全没有影响,因为改变hash不会重新加载页面
  2. 后面 hash 值的变化,并不会导致浏览器向服务器发出请求,浏览器不发出请求,也就不会刷新页面

  3. hash值的改变,都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash的切换。
  4. 当hash改变时,会触发window.onhashchange,监听该事件,对页面进行更新
  • 触发hashchange事件的方式有两个:通过a标签,< a href=" ">srtian</ a>,通过location.hash进行赋值,直接改变url

history

  • 在当前已有的back,forward,go基础上,html5 history interface 新增了两个方法pushState将url直接压入历史记录栈,replaceState将url直接替换成当前历史记录栈。
  • pushState()、replaceState() 方法接收三个参数:stateObj、title、url,这里的url不支持跨域
  • 调用history.pushState()或者history.replaceState()不会触发popstate事件. onpopstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法)
    hash,history对比
  1. history设置的 url 可以是同源下的任意 url ;而 hash 只能修改 # 后面的部分,因此只能设置当前 url 同文档的 url。
  2. hash兼容性好,history美观
  3. history设置的新的 url 可以与当前 url 一样,这样也会把记录添加到栈中;hash 设置的新值不能与原来的一样,一样的值不会触发动作将记录添加到栈中。
  4. history 在刷新页面时,如果服务器中没有相应的响应或资源,就会出现404。因此,如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。history因为没有 # 号,所以当用户刷新页面之类的操作时,浏览器还是会给服务器发送请求。为了避免出现这种情况,所以这个实现需要服务器的支持,需要把所有路由都重定向到根页面。
  5. hash 模式下,仅 # 之前的内容包含在 http 请求中,对后端来说,即使没有对路由做到全面覆盖,也不会报 404。
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容