概述

window.onpopstate是popstate事件在window对象上的事件处理程序.

每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发. 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,
或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝.

调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在浏览器某些行为下触发,
 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法).

当网页加载时,各浏览器对popstate事件是否触发有不同的表现,Chrome 和 Safari会触发popstate事件, 而Firefox不会.

语法

window.onpopstate = funcRef;

funcRef 是个函数名.

popstate事件

假如当前网页地址为http://example.com/example.html,则运行下述代码后:

window.onpopstate = function(event) {

  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));

};

//绑定事件处理函数.

history.pushState({page: }, "title 1", "?page=1");    //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1

history.pushState({page: }, "title 2", "?page=2");    //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2

history.replaceState({page: }, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3

history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"

history.back(); // 弹出 "location: http://example.com/example.html, state: null

history.go();  // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}

即便进入了那些非pushState和replaceState方法作用过的(比如http://example.com/example.html)没有state对象关联的那些网页, popstate事件也仍然会被触发.
<body>

    Document

    <p>存入历史</p>

    <script>

        // h5 history

        $(function () {

            $('p').click(function() {
　　　　　　　　　 // 浏览器显示 http://192.168.1.223:8989/page1

                history.pushState({'info': '测试'}, '标题', 'page1')

            })

        })

　　　　

    </script>

</body>

　https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onpopstate

【vue-router的基础】history了解一下的更多相关文章

  1. [Vue 牛刀小试]：第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  2. 「vue基础」一篇浅显易懂的 Vue 路由使用指南（ Vue Router 上）

    大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...

  3. [Vue 牛刀小试]：第十三章 - Vue Router 基础使用再探（命名路由、命名视图、路由传参）

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  4. Vue Router基础

    路由 安装 vue-router 起步 <router-link to="/foo">Go to Foo</router-link> <router- ...

  5. vue & $router & History API

    vue & $router gotoTemplateManage(e) { e.preventDefault(); this.$router.push({ path: `/operate-to ...

  6. vue Router——基础篇

    vue--Router简介 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用. vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路 ...

  7. Vue Router 路由实现原理

    一.概念 通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式 更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash  ...

  8. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  9. Vue技术点整理-Vue Router

    路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...

  10. 8. Vue - Router

    一.Vue Router 的使用 JavaScript: 1.创建组件:创建单页面应用需要渲染的组件 2.创建路由:创建VueRouter实例 3.映射路由:调用VueRouter实例的map方法 4 ...

随机推荐

  1. 阶段3 2.Spring_05.基于XML的IOC的案例1_3 测试基于XML的IOC案例

    编写测试方法. TestMehtod 生成测试方法 只需要改个名字叫做testFindAll 然后就复制这个方法,多复制几次改改名字 findAll方法 编写查询所有的代码 选中和这个方法,run 根 ...

  2. 阶段3 2.Spring_02.程序间耦合_4 曾经代码中的问题分析

    创建新的项目 修改打成jar包 创建一个接口 用来模拟保存的方法 创建接口的实现类 我们没有IAccountDao这个类.那么就需要去创建Iaccountdao IAccountDao接口的创建 创建 ...

  3. Python学习笔记：使用request库遇到的问题

    一.在请求参数中包含中文时,需要进行编码,如果不进行编码会报错 报错信息: 如:请求参数为:{"username":"超级管理员"} 在使用xlrd模块进行操作 ...

  4. vmware虚拟机设置时区、时间

    首先查看时间发现和百度的时间不一样 [root@www ~]# dateWed Dec 5 14:00:32 CST 2018 1.配置ntp服务器,设置时区同步,请参照ntp篇  https://w ...

  5. 关于DataFram的.values

    DataFram类型的变量a,设a有n个样本,m个特征,当执行语句b = a.values后,b为(n, m)的ndarray矩阵类型,当执行c = b.ravel()后,c为(n*m,)维行向量

  6. 关于Eclipse及JDK安装过程中的一些问题

    一,环境变量的配置 1.配置CLASSPATH系统变量 CLASSPATH系统变量为类查找路径 ①.在使用javac进行编译时遇到import时候就会通过这个变量里面配置的路径去查找.如果配置的是目录 ...

  7. python 并发编程 多线程与多进程的区别

    1.开进程的开销远大于开线程 2 同一进程内的线程共享该进程的数据,进程之间地址空间是隔离的 1 开进程的开销远大于开线程 from multiprocessing import Process de ...

  8. numpy使用数组进行数据处理

    numpy使用数组进行数据处理 meshgrid函数 理解: 二维坐标系中,X轴可以取三个值1,2,3, Y轴可以取三个值7,8, 请问可以获得多少个点的坐标? 显而易见是6个: (1,7)(2,7) ...

  9. centos7下apache启动报错记录

    http重启httpd发生错误,后面按照提示执行systemctl status httpd.service命令 按照提示,继续执行journalctl -xe 这里显示了详细的错误信息,并且给出了解 ...

  10. 剑指offer-递归和循环-python

    -斐波那契数列- 大家都知道斐波那契数列(1.1.2.3.5.8.13.21.34.……),现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0). n<=39 斐波那契数 ...