最近研究vue-router单页转跳而不向服务器请求的原理,

主要是HTML5 history以及hash的应用,支持history时使用history模式

下面详细学习了一下常用的history相关的API

常用API:

1.history.length:

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

2.history.pushState(state,title,URL):

向浏览器新增一条历史记录,但是不会刷新当前页面(不会重载),其中state为对象,可以用作携带信息用,title:目前来看没啥用一般为空或null,URL:即要更改页面的URL,且必须同源,不能跨域;

3.history.replaceState(state,title,URL):

更改当前浏览器的历史记录,即把当前执行此代码页面的记录给替换掉,参数与第二条相同;

4.history.back()、history.forward()、history.go():

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

5.history.state:

返回当前页面状态参数,此参数一般由history.pushState(state,title,URL);以及history.replaceState(state,title,URL);附带的state值,例子如下:

当前页面为http://example.com

history.pushState({a:1},null,"test1");//http://example.com/test1
history.state; //{a:1} history.pushState({b:2},null,"test2");//http://example.com/test2
history.state; //{b:2} history.back(); //http://example.com/test1
history.state; //{a:1} history.back(); //http://example.com
history.state; //null

上面例子应该已经很明确的表明state的取值,即当前页面的状态值,没有状态值为null;

6.history事件onpopstate:

window.onpopstate = function(e){
console.log(e.state);
}

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

由此可以看出vue-router中push()、go()等函数的一些端倪,但是vue-router比这个要复杂,

history是其基础之一

HTML5 history详解的更多相关文章

  1. HTML5 File详解

    input file控件限制上传文件类型 Html5 FileReader 对文件进行Base64编码 FileReader.readAsDataURL

  2. 市场主流5款HTML5开发框架详解

    我们经常听见的前端框架是一个非常大的范词,因为前端框架都是基于JS.CSS.HTML5技术开发实现的,不过选择一个HTML5开发框架需要考虑哪些方面,首先就是需要什么样的功能,其次就是技术实现,不过当 ...

  3. HTML5使用详解

    1.什么是HTML5 HTML5是新的HTML标准. 支持最新的Safari,Chrome,Firefox以及Opera,Ie9支持某些HTML5特性. 2.新建HTML5页面 <!DOCTYP ...

  4. 转: html5 history api详解~很好的文章

    从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页 ...

  5. 转:HTML5 History API 详解

    从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页 ...

  6. 最全html5 meta设置详解 (转)

    meta 详解,html5 meta 标签日常设置   <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html la ...

  7. 免费的HTML5连载来了《HTML5网页开发实例详解》连载(二)

    最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...

  8. SSE技术详解:一种全新的HTML5服务器推送事件技术

    前言 一般来说,Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Ser ...

  9. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

随机推荐

  1. python-log-env

    logging.basicConfig(format="[%(asctime)s] %(filename)s[line:%(lineno)d] %(levelname)s: %(messag ...

  2. apache跨域图片配置

    修改httpd.conf 1 找到 网站目录设置 <Directory "/var/www"> AllowOverride ALL # Allow open acces ...

  3. 0_Simple__template

    简单的 CUDA 应用模板,白送的 Sample. ▶ 源代码 //template_cpu.cpp extern "C" void computeGold(float *, co ...

  4. HTML5 借助http请求发送formdata对象,从而上传文件 XMLHttpRequest, FormData

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. 11.使用ForwardAction实现页面屏蔽。

    转自:https://wenku.baidu.com/view/84fa86ae360cba1aa911da02.html 我们在jsp页面之间写链接总会是.../xxx.jsp,而如果我们想屏蔽掉具 ...

  6. SQL SERVER2008 DBX Error: Driver could not be properly initialized

    raised exception class TDBXError with message 'DBX Error:  Driver could not be properly initialized. ...

  7. tomcat 服务器发布网站

    第一种方法:在tomcat中的conf目录中,在server.xml中的,<host/>节点中添加: D:\Program Files\Apache Software Foundation ...

  8. 可视化库-seaborn-调色板(第五天)

    1. 基础的调色板的演示  color_palette() 设置传入的任何颜色,不传使用默认颜色,set_palette() 设置所有图的颜色# 6种主题 # 1 deep# 2 muted# 3 p ...

  9. mysql创建定时器(event),查看定时器,打开定时器,设置定时器时间

    由于项目需要创建定时器(evevt),所以就百度了一下,发现基本都是来源于一个模板,有些功能还不全,现在自己总结一下. 注:mysql版本是从5.1开始才支持event的.如果你的版本低于5.1就先升 ...

  10. Flume环境搭建_五种案例(转)

    Flume环境搭建_五种案例 http://flume.apache.org/FlumeUserGuide.html A simple example Here, we give an example ...