概述

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. Linux监控命令之==>strace

    一.命令介绍 strace 常用来跟踪进程执行时的系统调用和所接收的信号.在Linux 世界,进程不能直接访问硬件设备,当进程需要访问硬件设备(比如读取磁盘文件,接收网络数据等等)时,必须由用户态模式 ...

  2. Docker 资源汇总

    Docker 资源汇总 Docker官方英文资源 Docker官网:http://www.docker.com Docker Windows 入门:https://docs.docker.com/do ...

  3. 锋利的jQuery（第二版） 初读笔记

    window.onload(): 必须等待网页中所有的内容加载完毕后(包括图片)才能执行. $(document).ready(): 网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没 ...

  4. opencv2中访问像素的简单方法-自定义一个宏CV_MAT_ELEM2

    利用Mat的step[0],step[1]访问像素的行列,自定义一个宏CV_MAT_ELEM2(src,dtype,y,x),src是待访问的Mat,dtype是src的数据类型(int,float, ...

  5. python基础-输出

    输出helloworld语句       print('helloworld') 换行操作    print('helloworld',‘hellodarling’)

  6. cocos2dx基础篇(3) 常用重要类

    ---------------------------------------- 入口类main.cpp 主要控制类AppDelegate.cpp -------------------------- ...

  7. P4995 跳跳！

    喵喵喵好久没做过贪心的题目了,刷一下免得忘了嘤嘤嘤 题面 虽然是黄题,但是我承认并不是很难,so看代码吧还是.. #include<set> #include<map> #in ...

  8. yum本地源和网络源的配置

    一.yum本地源 1. 删除YUM库[root@tianyun ~]# rm    -rf    /etc/yum.repos.d/* 2.挂载安装光盘(临时):[root@tianyun ~]# m ...

  9. Logistic回归实战篇之预测病马死亡率

    利用sklearn.linear_model.LogisticRegression训练和测试算法. 示例代码: import numpy as np import matplotlib.pyplot ...

  10. USACO刷题索引

    序 在距离CSP2019还有41天的国庆备战中,考了一场画风非常奇特的六校联赛,然后被教练建议刷一下这个巩固代码实现能力,然后就来了||ヽ(*￣▽￣*)ノミ|Ю. 这个网站还是挺好玩儿的吧,刚开始各种 ...