概述

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. IE浏览器兼容问题（unset不生效）

    背景色重置:background-color: transparent; width重置:auto height重置:auto

  2. 安装MySQL Enterprise Monitor

    MySQL Enterprise Monitor是专门为MySQL数据库而设计的一款企业级监控,能非常好地与MySQL各方面特性相结合,包括:MySQL的关键性能指标.主机.磁 盘.备份.新特性相关以 ...

  3. Django配置Mysql数据库 （Pycharm）

    Django配置MySQL数据库方法 一.settings.py文件中修改数据库配置为下面的内容: # Database # https://docs.djangoproject.com/en/2.0 ...

  4. Oracle 笔记（一）

    Oracle基本理论 l  主流数据库 微软公司:SQL Server  ACCESS IBM公司:DB2  infomix Oracle公司:Oracle  MySQL(AB公司) 小型数据库 AC ...

  5. P2802 【回家】

    (づ￣3￣)づ╭❤-(题面哦~~) 当初做的时候也借鉴了一些题解,发现确实有很多人都是在n和m上分不清.. 好吧,我也没分清.. 然后就一直不停错,还找不出来原因.. 最后狠心把所有判断dfs停止的条 ...

  6. netcore 实现一个简单的Grpc 服务端和客户端

    参考资料,和详细背景不做赘述. 首先定义prop 文件 syntax ="proto3"; package RouteGrpc; service HelloWorld{ rpc S ...

  7. deepin下安装Qt5&以及部分问题解决

    deepin安装Qt5 1 deepin商店里的Qt5版本太低,可以直接下载官方的Qt5安装包: 官方下载渠道:http://www.qt.io/download-open-source/ 离线镜像下 ...

  8. （2.2）【转】mysql的SQL笔记

    一千行 MySQL 详细学习笔记 IT技术思维 4月1日 ↑↑↑点上方蓝字关注并星标⭐「IT技术思维」 一起培养顶尖技术思维 作者:格物 原文链接:https://shockerli.net/post ...

  9. java 内容仓储

    什么是JAVA内容仓库(Java Content Repository)(2) 转载 自:http://blog.csdn.net/vltic/article/details/7249395 内容仓库 ...

  10. redis基本操作和 过期时间设置以及持久化方案

    Redis是NOSQL阵营中的一种数据库,主要用于存储缓存 五大数据类型:字符串(String).散列(hash).列表(list).集合(set).有序集合(SortedSett .zset) St ...