HTML5 history 新增了两个 API:history.pushState 和 history.replaceState

两个 API 都接收三个参数:

1.状态对象(state object):一个 javascript对象,与用 pushstate()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态,popstate事件都会被触发,并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。

2.标题(title):FireFox浏览器目前会忽略该参数,虽然以后可能会用上。考虑到未来可能会对该方法进行修改,传一个空字符串会比较安全。或者,你也可以传入一个简短的标题,标明将要进入的状态。

3.地址(URL):新的历史记录条目的地址。浏览器不会再调用 pushState() 方法后加载该地址,但之后,可能会试图加载,例如用户重启浏览器。新的URL不一定是绝对路径;如果是相对路径,它将以当前的URL为基准;传入的URL与当前URL应该是同源的,否则,pushState()会抛出异常。该参数是可选的;不指定的话则为文档当前URL。

相同之处是两个API都会操作浏览器的历史记录,而不会引起页面的刷新。

不同之处在于pushState会增加一条新的历史记录,而replaceState则会替换当前的历史记录。

前端路由实现(history)的更多相关文章

  1. js 实现前端路由的方法

    js 实现前端路由的方法 前端路由原理 History API https://developer.mozilla.org/en-US/docs/Web/API/History_API https:/ ...

  2. 前端路由两种模式:hash、history

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  3. 前端路由以及浏览器回退,hash & history & location

    一.前言 其实不止一次想监听浏览器的回退方法,比如 在 list.html 页滚动加载了几页列表,点到 detail.html 看详情,反回来时又得重新加载几页 H5 有背景音乐的,跳页就得重新放,体 ...

  4. 前端路由的两种模式: hash 模式和 history 模式

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  5. 【前端路由】Vue-router 中hash模式和history模式的区别

    咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...

  6. 前端路由的两种模式:hash(#)模式和history模式(转)

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  7. 前端路由hash、history原理及简单的实践下

    阅读目录 一:什么是路由?前端有哪些路由?他们有哪些特性? 二:如何实现简单的hash路由? 三:如何实现简单的history路由? 四:hash和history路由一起实现 回到顶部 一:什么是路由 ...

  8. 前端路由原理之 hash 模式和 history 模式

    什么是路由? 个人理解路由就是浏览器 URL 和页面内容的一种映射关系. 比如你看到我这篇博客,博客的链接是一个 URL,而 URL 对应的就是我这篇博客的网页内容,这二者之间的映射关系就是路由. 其 ...

  9. 简单的基于hash和hashchange的前端路由

    hash定义 hash这个玩意是地址栏上#及后面部分,代表网页中的一个位置,#后面部分为位置标识符.页面打开后,会自动滚动到指定位置处. 位置标识符 ,一是使用锚点,比如<a name=&quo ...

  10. javascript基础修炼(6)——前端路由的基本原理

    [造轮子]是笔者学习和理解一些较复杂的代码结构时的常用方法,它很慢,但是效果却胜过你读十几篇相关的文章.为已知的API方法自行编写实现,遇到自己无法复现的部分再有针对性地去查资料,最后当你再去学习官方 ...

随机推荐

  1. [Bayes] Parameter estimation by Sampling

    虽然openBugs效果不错,但原理是什么呢?需要感性认识,才能得其精髓. Recall [Bayes] prod: M-H: Independence Sampler firstly. 采样法 Re ...

  2. [IR] Open Source Search Engines

    From:http://blog.csdn.net/xum2008/article/details/8740063 本文档是对现有的开源的搜索引擎的一个简单介绍 1.    Lucene Lucene ...

  3. Mybatis常见面试题(转)

    Mybatis技术内幕系列博客,从原理和源码角度,介绍了其内部实现细节,无论是写的好与不好,我确实是用心写了,由于并不是介绍如何使用Mybatis的文章,所以,一些参数使用细节略掉了,我们的目标是介绍 ...

  4. iOS mac终端下的SQL语句

    本文转载至 http://blog.csdn.net/majiakun1/article/details/41281801 我们都知道数据库的创建可以借助图形化的数据库工具软件,但也可以在Mac终端下 ...

  5. django 1.11.1 连接MySQL

    一.定义数据库 settings.py搜索   DATABASES 参考路径:   D:\Python27\Lib\site-packages\django\bin\app\app\settings. ...

  6. GDI+绘制五星红旗

    五星红旗是由红色背景,加5个黄色五角星组成.绘制一个五星红旗的思路,就是先定义一个五角星的自定义控件,然后通过设置五角星的大小.位置.旋转角度等属性,组合成一个五星红旗. 五角星自定义控件代码: pu ...

  7. CSS3 水平翻转

    .button_1:hover #button1_img,.button_2:hover #button2_img{ box-shadow: 0 0 10px #9AFE2E; animation: ...

  8. Web(一)

    Tomcat 服务器       B/S 浏览器/服务器       C/S 客户端/服务器  URI :大 广 /项目名                      URL: 小  http://lo ...

  9. win10 安装 open live write

    安装完 open live write后将Memento.OLW_V1.0.0.3.7z解压到C:\Users\pc_name\AppData\Local\OpenLiveWriter\app-0.6 ...

  10. POJ 1456 - Supermarket - [贪心+小顶堆]

    题目链接:http://poj.org/problem?id=1456 Time Limit: 2000MS Memory Limit: 65536K Description A supermarke ...