前端路由实现(history)
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)的更多相关文章
- js 实现前端路由的方法
js 实现前端路由的方法 前端路由原理 History API https://developer.mozilla.org/en-US/docs/Web/API/History_API https:/ ...
- 前端路由两种模式:hash、history
随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...
- 前端路由以及浏览器回退,hash & history & location
一.前言 其实不止一次想监听浏览器的回退方法,比如 在 list.html 页滚动加载了几页列表,点到 detail.html 看详情,反回来时又得重新加载几页 H5 有背景音乐的,跳页就得重新放,体 ...
- 前端路由的两种模式: hash 模式和 history 模式
随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...
- 【前端路由】Vue-router 中hash模式和history模式的区别
咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...
- 前端路由的两种模式:hash(#)模式和history模式(转)
随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...
- 前端路由hash、history原理及简单的实践下
阅读目录 一:什么是路由?前端有哪些路由?他们有哪些特性? 二:如何实现简单的hash路由? 三:如何实现简单的history路由? 四:hash和history路由一起实现 回到顶部 一:什么是路由 ...
- 前端路由原理之 hash 模式和 history 模式
什么是路由? 个人理解路由就是浏览器 URL 和页面内容的一种映射关系. 比如你看到我这篇博客,博客的链接是一个 URL,而 URL 对应的就是我这篇博客的网页内容,这二者之间的映射关系就是路由. 其 ...
- 简单的基于hash和hashchange的前端路由
hash定义 hash这个玩意是地址栏上#及后面部分,代表网页中的一个位置,#后面部分为位置标识符.页面打开后,会自动滚动到指定位置处. 位置标识符 ,一是使用锚点,比如<a name=&quo ...
- javascript基础修炼(6)——前端路由的基本原理
[造轮子]是笔者学习和理解一些较复杂的代码结构时的常用方法,它很慢,但是效果却胜过你读十几篇相关的文章.为已知的API方法自行编写实现,遇到自己无法复现的部分再有针对性地去查资料,最后当你再去学习官方 ...
随机推荐
- windows下更换pip源
(1)在windows文件管理器中,输入 %APPDATA% (2)会定位到一个新的目录下,在该目录下新建pip文件夹,然后到pip文件夹里面去新建个pip.ini文件 (3)在新建的pip.ini文 ...
- Spark学习笔记——Spark上数据的获取、处理和准备
数据获得的方式多种多样,常用的公开数据集包括: 1.UCL机器学习知识库:包括近300个不同大小和类型的数据集,可用于分类.回归.聚类和推荐系统任务.数据集列表位于:http://archive.ic ...
- [SLAM] ***AR Tracking based on which tools?
SLAM虽然小复杂,但对于开发者而言,ar sdk通常会解决这个问题. 所以相对于识别,跟踪是个看上去高大上但实则不需要关注细节的部分. 识别,要技术深耕:跟踪,需行业深耕. 在此了解下常见的ar s ...
- ASP.NET MVC 4 (五) 视图
视图引擎与视图 多数情况下控制器action方法返回ViewResult对象,MVC内建action调用器ControllerActionInvoker负责调用控制器action方法并调用视图引擎处理 ...
- HighCharts-highcharts resetZoom点击事件
场景:zoom缩放功能: 选中x轴的一段区域后,需要解除x轴已设定的max值对zoom缩放功能的影响: 点击'reset zoom'后,又需要将max值重新赋值给x轴. 查遍highcharts ap ...
- iOS开发-- 使用TFHpple解析html
占坑 http://www.raywenderlich.com/14172/how-to-parse-html-on-ios
- NUC972---Linux驱动开发
驱动开发是嵌入式 Linux 产品开发的重要组成部分,驱动是将芯片底层与Linux应用连接起来的桥梁.驱动程序的好坏直接影响和决定着产品的稳定性,稳定的驱动程序是产品可靠性的基石. 编写 Linux ...
- PHP-CLI环境变量的设置和读取
http://luokr.com/p/30 通常我们在维护PHP线上项目的时候,为了隔离配置和代码,会使用fastcgi_param的形式将环境变量定义在Nginx的配置文件中(Apache可以使用S ...
- xrdp完美实现Windows远程访问Ubuntu 16.04
前言: 在很多场景下,我们需要远程连接到Linux服务器(本文是Ubuntu),传统的连接主要分为两种. 第一种:通过SSH服务(使用xshell等工具)来远程访问,编写终端命令,不过这个是无界面的, ...
- mdadm命令详解
创建阵列(-C或--create) --raid-devices(-n) 功能:指定阵列中成员盘个数. 举例:mdadm --create /dev/md0 -l5 -n2 /dev/sdb /dev ...