概述

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. PowerDesigner_15连接Oracle11g，反向工程导出模型图

    1.启动PowerDesigner2.菜单:File->ReverseEngineer->Database出来NewPhysicalDataModel对话框,DBMS选择ORACLEVer ...

  2. 关于token的理解

    什么是token token的意思是“令牌”,是服务端生成的一串字符串,作为客户端进行请求的一个标识. 当用户第一次登录后,服务器生成一个token并将此token返回给客户端,以后客户端只需带上这个 ...

  3. LeetCode.1022-根到叶路径二进制数之和(Sum of Root To Leaf Binary Numbers)

    这是小川的第381次更新,第410篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第243题(顺位题号是1022).给定二叉树,每个节点值为0或1.每个根到叶路径表示以最高 ...

  4. Ubuntu环境配置机器安装驱动

    ubuntu_environment_config.md thead > tr > th { text-align: left; border-bottom: 1px solid; } t ...

  5. finreport 截图时间的函数

  6. mysql——视图——概念

    二.视图 视图是一种虚拟的表,是从数据库中的一个或者多个表中导出来的表. 视图还可以从已经存在的视图的基础上定义. 数据库中只存放了视图的定义,并没有存放视图中的数据,这些数据存放在原来的表中. 使用 ...

  7. java中易错点

    1.A instanceof  B{这是没有好好利用java多态的表现} java中的二元操作符,测试A对象是否是B类的实例: 返回值:boolean类型 2.“==”与 “equals”的区别: = ...

  8. 关于eclipse设置JRebel

    版本:eclipse ee Version: 2018-09 (4.9.0) jrebel:最新2019-2 1.在eclipse->help->eclipse Marketplace 2 ...

  9. centos 防火墙 iptables firewalld SELinux

    参考 Centos7 只启用iptables 禁用firewalld功能 java.net.NoRouteToHostException: 没有到主机的路由 相关内容 centos7 中才开始引用fi ...

  10. Linux 中将用户添加到指定组

    添加组 usermod -a -G root dev 修改组 usermod -g root dec 删除组 gpasswd -d dev root gpasswd -a dev root //将用户 ...