my.createrouteobserver(object option)

若版本较低或需要适配多个客户端，建议采取 兼容处理 。

基础库 2.10.19 或更高版本；

支付宝客户端 支持

支小宝客户端 不支持

安诊儿客户端 支持

小程序开发者工具： 支持。

主体： 企业支付宝小程序 、 个人支付宝小程序

object object

pages 参数说明

小程序宿主使用时

当调用者是小程序宿主时，可以监听的页面路径形如：

页面路径示例	说明
pages/index/index	宿凯发k8官方网娱乐官方主页面
app://pages/index/index	宿凯发k8官方网娱乐官方主页面
plugin://nickname/indexx	指定插件公开页面
plugin-private://0000000000000000/pages/index/index	指定插件私有页面
*	通配符，指代所有宿主、插件等的页面 。 注意: 通配符作为局部使用时，不能模糊匹配页面的一部分，而只能代替整个页面路径。此限制对下述插件同样生效。
app://*	宿主的所有页面
plugin://nickname/*	指定插件的所有页面
plugin-private://0000000000000000/*	指定插件的所有页面

小程序插件使用时

当调用者是小程序插件时，可以监听的页面路径形如：

页面路径示例	说明
pages/index/index	插件自身页面
app://pages/index/index	宿凯发k8官方网娱乐官方主页面
plugin-private://0000000000000000/pages/index/index	指定插件私有页面
*	通配符，指代所有宿主、插件等的页面
app://*	宿主的所有页面
plugin-private://0000000000000000/*	指定插件的所有页面

routeobserver

页面路由和生命周期观察器。其实例方法如下：

观察器实例方法	触发时机
beforeroute	路由开始执行前
afterroute	路由执行结束后
beforeload	页面 onload 生命周期钩子触发前
afterload	页面 onload 生命周期钩子触发后
beforeshow	页面 onshow 生命周期钩子触发前
aftershow	页面 onshow 生命周期钩子触发后
beforeready	页面 onready 生命周期钩子触发前
afterready	页面 onready 生命周期钩子触发后
beforehide	页面 onhide 生命周期钩子触发前
afterhide	页面 onhide 生命周期钩子触发后
beforeunload	页面 onunload 生命周期钩子触发前
afterunload	页面 onunload 生命周期钩子触发后
onpagenotfound	页面未找到时
observe	开始监听
disconnect	结束监听

每个实例方法仅可调用一次。一个完整的示例是：

const routeobserver = my.createrouteobserver({ pages: ['pages/index/index'] })
  .beforeroute((payload) => {
    // payload.opentype 路由类型
    // payload.routeeventid 路由事件 id
  })
  .afterload((payload) => {
    // payload.page 页面实例
  })
  .observe();
// 不再需要监听时
routeobserver.disconnect();

生命周期回调

所有的页面生命周期回调会收到如下参数：

字段名	类型	说明
path	string	目标页面路径
routeeventid	string	路由事件id
page	object	页面实例
query	object	页面参数
isresume	boolean	可选。仅 beforeshow 和 aftershow 提供。值为 false 时即页面创建时的首次触发；值为 true 时即页面从隐藏状态回到展示状态

page 页面实例

回调参数的 page字段指向小程序页面实例，与在 getcurrentpages({ getallpages: true }) 中的结果相同。

这意味着，对于不同源的调用方（例如宿主小程序和插件），获得的 page 字段的结果是不一样的。请注意跨源页面的区分。

query 页面参数

当且仅当满足如下条件之一时，回调参数提供 query 字段以访问页面参数：

• 目标页面与 routeobserver 创建方同源，例如小程序宿主创建的 routeobserver 监听宿凯发k8官方网娱乐官方主页面；或者
• 目标页面是由 routeobserver 创建方打开的。例如，当小程序宿主调用 my.navigateto 打开插件的页面时，小程序宿主可以获得被打开的插件页面的参数

这意味着，对于不同源的调用方（例如宿主小程序和插件），获得的 query 字段的结果是不一样的。请注意跨源页面的区分。

页面生命周期触发过程

观察器可以监听特定页面生命周期完整流程。例如，打开一个页面时，观察器和页面实例将分别触发如下回调：

方法名（按序）	说明
routeobserver.beforeroute	打开页面的路由。可通过 opentype 区分类型
routeobserver.beforeload	onload 生命周期即将执行
page.onload	onload 生命周期执行
routeobserver.afterload	onload 生命周期完成执行
routeobserver.beforeshow	onshow 生命周期即将执行
page.onshow	onshow 生命周期执行
routeobserver.aftershow	onshow 生命周期完成执行
routeobserver.afterroute	页面路由结束。可通过 opentype 区分类型
routeobserver.beforeready	onready 生命周期即将执行
page.onready	onready 生命周期执行
routeobserver.afterready	onready 生命周期完成执行

当关闭页面时，观察器和页面实例将分别触发如下回调：

方法名（按序）	说明
routeobserver.beforeroute	关闭页面的路由。可通过 opentype 区分类型
routeobserver.beforeunload	onunload 生命周期即将执行
page.onunload	onunload 生命周期执行
routeobserver.afterunload	onunload 生命周期完成执行
routeobserver.afterroute	页面路由结束。可通过 opentype 区分类型

注意：关闭页面时可能会触发与 onhide 相关的生命周期，但请以 onunload 作为页面卸载的唯一依据。

路由事件回调

beforeroute 和 afterroute 提供以下参数：

字段名	类型	说明
opentype	string	路由类型
path	string	目标页面路径
routeeventid	string	路由事件id
page	object	页面实例。可选，在 beforeroute 阶段可能没有
query	object	页面参数。可选

opentype 路由类型

路由事件分类如下：

opentype 枚举值	说明
applaunch	冷启动小程序第一个页面
autorelaunch	热启动小程序页面
tabclick	用户点击 tabbar 切换页面
back	用户点击返回按钮或回退手势关闭页面
navigateto	my.navigateto 打开页面
redirectto	my.redirectto 打开页面
switchtab	my.switchtab 打开页面
relaunch	my.relaunch 打开页面
navigateback	my.navigateback 关闭页面

路由事件

观察器可以监听影响特定页面的路由事件，例如 my.navigateto、my.navigateback 等。通过 beforeroute 和 afterroute 回调对象的 opentype 可以区分不同的类型。

以 my.navigateto 为例，观察器和页面实例将分别触发如下回调：

方法名（按序）	说明
routeobserver.beforeroute	my.navigateto 即将通知客户端打开新页面
previouspage.beforehide	上一个页面 onhide 生命周期即将执行
previouspage.onhide	上一个页面 onhide 生命周期执行
prevouspage.afterhide	上一个页面 onhide 生命周期完成执行
routeobserver.beforeload	新页面 onload 生命周期即将执行
newpage.onload	新页面 onload 生命周期执行
routeobserver.afterload	新页面 onload 生命周期完成执行
routeobserver.beforeshow	新页面 onshow 生命周期即将执行
newpage.onshow	新页面 onshow 生命周期执行
routeobserver.aftershow	新页面 onshow 生命周期完成执行
routeobserver.afterroute	路由结束

注意:路由事件仅会在目标页面上触发 beforeroute 和 afterroute 回调。其他被影响的页面不会收到这两个路由回调，但会触发其生命周期回调。

可以通过 routeeventid 关联一次路由事件中的所有被影响的生命周期。例如：

const routecontext = {
  // 通过 routeeventid 关联事件
};
function pushcontextevent(payload, hook) {
  const routeeventid = payload.routeeventid;
  const context = routecontext[routeeventid] || (routeeventid[routeeventid] = []);
  context.push({
    hook,
    payload,
  });
}
my.createrouteobserver({ pages: ['pages/index/index'] })
  .beforeroute((payload) => {
    pushcontextevent(payload, 'beforeroute');
  })
  .beforehide((payload) => {
    pushcontextevent(payload, 'beforehide');
  });
my.navigateto({
  url: '/pages/index/index',
  complete(payload) {
    pushcontextevent(payload, 'my.navigateto');
  },
});