• home > webfront > ECMAS > emphasis >

    再谈location与history之跳转转态监控—router的两种实现模式

    Author:[email protected] Date:

    现在做spa页面,页面间的跳转很重要,什么时候不刷新跳转,什么是刷新跳转。如果想要刷新当前的页面,又避免 POST 数据提交怎么办?前端路由hash model与HTML5 history model有何区别?

    刷新当前页面更新内容

    location更新URL地址,

    使用location对象可以通过很多方式来改变浏览器的位置,每次修改location的属性(hash除外),页面都会以新URL重新加载。 

    浏览器的历史记录中就会生成一条新记录,用户通过单击"后退"按钮都会导航到前一个页面。

    要禁用这种行为,可以使用location.replace(URL)方法

    结果虽然会导致浏览器位置改变,但不会在历史记录中生成新记录。在调用replace()方法之后,用户不能回到前一个页面、、

    history常用方法:

    • location.assign(url) : 加载 URL 指定的新的 HTML 文档。 就相当于一个链接,跳转到指定的url,当前页面会转为新页面内容,可以点击后退返回上一个页面。

    • location.replace(url) : 通过加载 URL 指定的文档来替换当前文档 ,这个方法是替换当前窗口页面,前后两个页面共用一个

    • 窗口,所以是没有后退返回上一页的

    • location.reload():方法用于刷新当前文档。如果把该方法的参数设置为 true,强制刷新当前页面。如果有 POST 数据提交,则会重新提交数据;如果想要刷新当前的页面,又避免 POST 数据提交,可以使用:window.location.replace( location.href );

    不刷新当前页面更新内容

    前端改变浏览器地址而不刷新页面,有两种方法:改变hash(只能改变hash值) 和html5 History改变浏览器地址。

    虽然通过hashchange等一系列操作也能满足router需求,但是hash router 对搜索引擎不友好(hash值不会发送给服务端,静态化页面时难以保持路径一致),难以追踪用户行为。  

    从HTML5开始提供了对history栈中内容的操作。history.pushState()和history.replaceState()方法,他们分别可以添加和修改历史记录条目。这些方法通常与window.onpopstate配合使用。像angularJS Vue react 等router模块都提供有 hash模式和HTML5 History 模式

    history常用API:

    • history.pushState(state,title,URL):向浏览器新增一条历史记录,但是不会刷新、重载当前页面,且不会触发hashchange事件,参数如下:

      • state为JS对象,可以用作携带信息(限制640k),popstate事件的state属性包含该历史记录条目状态对象的副本。

      • title:目前来看没啥用(未来可能会用到),一般为空或null,

      • URL:即要更改页面的URL,且必须同源,不能跨域;类似location =URL(但仅是更新浏览器地址栏地址,不会加重URL)

    • history.replaceState(state,title,URL):更改当前浏览器的历史记录,即把当前执行此代码页面的记录给替换掉,参数与pushState相同;

    • history.back()、history.forward()、history.go():分别为前进一个历史,后退一个,history.go(Number),其中Number可正可负,即向前或向后若干个记录

    • history.state:返回当前页面状态参数,此参数一般由history.pushState及history.replaceState附带的state值

    • history.length:返回当前页面所产生的历史记录个数,即在同一个浏览器tab下产生的历史记录;

    详细的推荐查看:https://developer.mozilla.org/zh-CN/docs/Web/API/History

    在history中跳转

    使用back(),forward(),go()方法来完成在用户历史记录中向后和向前跳转。

    在history中向后跳转

    • window.history.back();

    • window.history.go(-1);

    向前跳转

    • window.history.forward();

    • window.history.go(1);

    当前页

    • window.history.go(0);

    添加和修改历史记录中的条目 

    使用history.pushState()可以改变referrer(引用),它在用户发送XMLHttpRequest请求时在HTTP头部使用,改变state后创建的XMLHttpRequset对象的referrer都会被改变。因为referrer是标识创建XMLHttpRequest对象时this所代表的window对象中document的URL。

    pushState()

    JavaScript修改浏览器URL地址栏,不刷新页面(vue、react项目服务端渲染,可以保持访问地址一致)

    var stateObject = {};
    var title = "zhoulujun.cn test page";
    var newUrl = "/zhoulujun/demo/test";
    history.pushState(stateObject,title,newUrl);

    推荐阅读:https://router.vuejs.org/zh/guide/essentials/history-mode.html

    history事件onpopstate:

    每当活动的历史记录项发生变化时, popstate 事件都会被传递给window对象。


    在history.back(),history.forward(),history.go()时触发此事件,但是在history.pushState();history.replaceState();时并不会触发此事件,但事件内可以获取到state状态值

    各浏览器对popstate事件是否触发有不同的表现,Chrome和Safari会触发popstate事件,而FireFox不会。

    hash router路由实现流程history 路由模式,实现流程图


    参考文章:

    从了解Hash和Html5 History 到简单实现路由 https://segmentfault.com/a/1190000019991267

    HTML5 history详解 https://blog.csdn.net/garrettzxd/article/details/80657281



    转载本站文章《再谈location与history之跳转转态监控—router的两种实现模式》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/js6/2016_0425_7787.html