美文网首页Ajax
单页面应用路由

单页面应用路由

作者: 冷小谦 | 来源:发表于2019-01-21 10:07 被阅读48次

    最初的网页是一个个独立的html页面,通过a标签从页面跳转到另一个页面。但是同一个页面会有很多相同的部分。相同的部分无论是静态的还是动态语言程序生成都会浪费一定带宽。

    后来通过ajax,用户交互不会再刷新整个页面,单页面应用也就初具雏形。

    由于页面中大部分元素是ajax请求后渲染出来的,但由于ajax请求不会改变地址栏,无法保持页面的状态。用户不能把页面的某个状态以url的方式分享给其他人。要重新打开页面重新查找或者请求。

    所以需要路由,把页面的状态保存在url中。

    前端路由有两种实现方式,一种是H5提出的historyapi,另一种是hash路由。

    以往后台路由直接改页面的url使页面刷新。但是前端路由通过#号不能刷新页面,只能通过window的监听事件hashchange来监听hash的变化。我们知道window.location可以操作地址栏修改url,但是修改了Location就会向服务器发送请求并发生页面跳转。但是hash属性修改后不会发生页面跳转

    history.push新路由

    H5标准中,为History添加了两个新方法pushState和replaceState。
    pushState可以让url改变但不会导致浏览器跳转。即改变地址栏并创建一条新的浏览历史记录但不发送网络请求

    相关文章

      网友评论

        本文标题:单页面应用路由

        本文链接:https://www.haomeiwen.com/subject/jwrzdqtx.html