优维低代码:History 会话历史

导语

优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。

连载第三十七期

《高级指引：History 会话历史》

▽

在 Brick Next 中，History 概念不同于浏览器原生的 History，而是指的是一个第三方库 history，它和原生 History 的能力类似，但提供了更丰富的能力，另外我们又在它的基础上扩展了更多能力。

# 使用

在构件源码中使用：

import { getHistory } from "@next-core/brick-kit";


const history = getHistory();
history.push("/your/location");

在 Storyboard 中配置事件处理：

events:
  something.happen:
    action: "history.push"
    args:
      - "/your/location"

# 属性

location

export interface Location<S = LocationState> {
  pathname: string;
  search: string;
  state: S;
  hash: string;
  key?: string;
}

# 基本方法

push

跳转到指定地址，往浏览器会话历史栈中推入一条新记录。普通的页面跳转应使用此方法。

replace

跳转到指定地址，替换浏览器会话历史栈中最新的一条记录。

goBack

回退到浏览器会话历史栈中的上一条记录。

goForward

前进到浏览器会话历史栈中的下一条记录。

# 扩展方法

pushQuery

更新指定 query 参数，会保留当前其它 query 参数，往浏览器会话历史栈中推入一条新记录。

replaceQuery

类似 pushQuery，但会替换浏览器会话历史栈中最新的一条记录。

pushAnchor

类似 history.pushQuery，将跳转到指定的 anchor（ URL hash）地址。此方法默认不会触发页面重新渲染。

reload

将重载当前会话，即触发页面重新渲染。与 location.reload() 不同，它不会触发浏览器页面的重载。

block

设置后，将在用户离开页面前（例如跳转到其它页面、刷新、关闭浏览器标签页等）弹出提示信息，以便用户确认是否离开。更多信息请参考 lifeCycle.onBeforePageLeave。

unblock

取消之前设置的阻止页面离开信息的设置。

# 高级

在 push 等支持可选的 state 参数的地方传递 { notify: false } 可以不触发页面重新渲染。

# 变更历史