history npm

history npm

• createBrowserHistory 产生的控制浏览器真实地址的 history 对象
• createHashHistory 产生的控制浏览器 hash 的 history 对象
• createMemoryHistory 产生的控制内存中地址的 history 对象

history 对象共同的特点，共同维护一个地址栈

history 对象

• action ：当期地址栈，最后一次操作的类型
  • 如果是通过 createXXXHistory 函数新创建的 history 对象，action 固定为 POP，
  • 如果调用了 history 的 push 方法，action 变为 PUSH
  • 如果调用了 history 的 replace 方法， action 变为 REPLACE
  • 其他不变化
• push： 向当前地址栈位置，入栈一个地址
• go ：控制当前地址栈指针偏移，如果是 0，地址不变；如果是负数，则后退指定的步数； 如果是正数，则前进指定的步数
• length： 当前栈中的地址数量
• goBack： 相当于 go(-1)
• goForward: 相当于 go（1）
• listen： 用于监听地址栈指针的变化
• 该函数接收一个函数作为参数，该参数表示地址变化后要做的事情
  • 参数函数接收两个参数
    • location： 记录了新的地址
    • action：进入新地址的方式
      • POP：指针移动，调用 go、 goBack、goforward、 用户点击浏览器后退按钮
      • PUSH： 调用 history.push
      • REPLACE： 调用 history.replace
• block： 用于设置一个阻塞，当页面发生跳转时，会将指定的消息传 getUserConfirmation，调用getUserConfirmation函数
  • 该函数接收一个字符串作为参数，表示消息内容，也可以接收一个函数作为参数，函数的返回值是消息内容
• createHref：basename + url

以下是哪个函数，虽然名字和参数不同，到哪返回的对象结构一样

createBrowserHistory

创建一个使用浏览器 History Api 的 history 对象

配置对象：

• basename: 设置根路径
• forceRefresh：地址改变时是否强制刷新页面
• keyLength: location对象使用的key长度 （区分相同地址）
• getUserConfirmation： 一个函数，该函数当调用history对象block函数后，发生页面跳转时运行

createHashHistory

创建一个使用浏览器 hash 的 history 对象

配置对象：

• hashType: #号后给定的路径格式
  • hashbang: 被Google抛弃， #！路径
  • noslash: #/a/b/c
  • slash: #/a/b/c

createMemoryHistory

创建一个使用浏览器 History Api 的 history 对象 ， 一般用于没有地址栏的环境 例如：手机