Vue2.x 路由实现地址栏变化的API(history.replaceState() 与pushState())

文章目录

    • 快速体验
    • history 对象
      • history的API
      • history属性
    • `HTML5为history对象添加了两个新方法`
      • history.pushState()
        • 参数
        • 案例步骤说明
      • `不允许输入跨域网址`
      • history.replaceState()
        • history.replaceState() 与pushState()功能类似,除了这点:
        • 应用场景
    • 案例 (history.replaceState() 与pushState())

快速体验

在控制台中输入如下代码,回车

history.pushState({name: 'huangbiao'}, '', '2.html?aaa=bbb')

history 对象

浏览器窗口有一个history对象,用来保存浏览历史。

history的API

  • back():移动到上一个访问页面,等同于浏览器的后退键。
  • forward():移动到下一个访问页面,等同于浏览器的前进键。
  • go():接受一个整数作为参数,移动到该整数指定的页面,比如go(1)相当于forward(),go(-1)相当于back()。

history属性

  • history.length

HTML5为history对象添加了两个新方法

history.pushState()

参数

state:一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null。
title:新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null。
url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

案例步骤说明

  1. 当前网址是example.com/1.html

  2. 执行代码

	var stateObj = { foo: 'bar' };
	history.pushState(stateObj, 'page 2', '2.html');
  1. 浏览器动作

    • 浏览器地址栏立刻显示example.com/2.html,但并不会跳转到2.html,甚至也不会检查2.html是否存在
    • 它只是成为浏览历史中的最新记录
  2. 点击一次倒退按钮

    • url将显示1.html,内容不变
    • 触发 popstate 事件
window.addEventListener('popstate', function() {
      // 取出 设置好的 history.state 值,做判断
      console.log(arguments)
      debugger
})

不允许输入跨域网址

例子说明

// 当前网址是 http://example.com
history.pushState(null, null, 'https://twitter.com/hello');

这样设计的目的是,防止恶意代码让用户以为他们是在另一个网站上。

history.replaceState()

history.replaceState() 与pushState()功能类似,除了这点:

  1. replaceState()是用来修改当前的历史记录(history实体),而不是创建一个新的历史记录
  2. 所以,当执行完history.replaceState()后,点击返回按钮照样会返回上一个一面。

应用场景

  1. 需要更新一个state对象或者当前history实体时,可以用replaceState()来实现

案例 (history.replaceState() 与pushState())


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
  head>
  <body>
    <div>
      <button onclick="routeChange()">路由地址切换button>
      <button onclick="replaceChange()">改变当前路由button>
    div>
  body>
  <script>
    window.addEventListener('popstate', function() {
      // 取出 设置好的 history.state 值,做判断
      console.log(arguments)
      debugger
    })

    function routeChange() {
      let timeStamp = new Date().getTime()
      let obj = {
        username: 'timeStamp' + timeStamp,
        timeStamp: timeStamp
      }
      // 增加一个历史记录
      history.pushState(obj, null, `2.html?b=${new Date().getTime()}`)
      console.log('增加历史记录后 state的值:', history.state) // a
    }

    function replaceChange () {
      history.replaceState('a',null,'a.html?a=huangbiao');
    }

  script>
html>

你可能感兴趣的:(Vue2.x,vuex,iview,vux,Html5,JavaScript,ES6)