路由方式

对于路由的触发方式以及页面生命周期函数如下:

详见页面生命周期函数

路由方式触发时机路由前页面触发事件路由后页面触发事件
初始化智能小程序打开的第一个页面onLoad, onShow
打开新页面调用 API swan.navigateTo路由方式 - 图1 或使用组件 <navigator open-type="navigateTo"/>onHideonLoad, onShow
页面重定向调用 API swan.redirectTo路由方式 - 图2 或使用组件 <navigator open-type="redirectTo"/>onUnloadonLoad, onShow
页面返回调用 API swan.navigateBack路由方式 - 图3 或使用组件 <navigator open-type="navigateBack"/>或用户按左上角返回按钮onUnloadonShow
Tab 切换调用 API swan.switchTab路由方式 - 图4 或使用组件 <navigator open-type="switchTab"/> 或用户切换 Tab各种情况参考以下表
重新启动调用 API swan.reLaunch路由方式 - 图5 或使用组件 <navigator open-type="reLaunch"/>onUnloadonLoad, onShow

代码示例

在开发者工具中预览效果

详细示例建议在开发者工具中的控制台查看。

Tab 切换对应的生命周期(以 A、B 页面为 Tabbar 页面,C 是从 A 页面打开的页面,D 页面是从 C 页面打开的页面为例):

生命周期函数详解

当前页面路由后页面触发的生命周期备注
AANothing happend默认小程序打开时已经触发了A.onLoad,此时没有事件触发
ABA.onHide(), B.onLoad(), B.onShow()路径A->B,B第一次打开,触发onLoad
AB(再次打开)A.onHide(), B.onShow()路径A->B->x(任意页面)->B,B再次打开,不再触发onLoad,直接触发onShow
CAC.onUnload(), A.onShow()路径A->C->A,C页面销毁触发onUnLoad,A第二次打开触发onShow
CBC.onUnload(), B.onLoad(), B.onShow()路径A->C->B,C页面销毁触发onUnLoad,B第一次创建触发onLoad
DBD.onUnload(), C.onUnload(), B.onLoad(), B.onShow()路径A->C->D->B,D和C页面依次销毁触发onUnLoad,B第一次创建触发onLoad
D(从转发进入)AD.onUnload(), A.onLoad(), A.onShow()路径D->A,D页面销毁触发onUnLoad,A第一次创建触发onLoad
D(从转发进入)BD.onUnload(), B.onLoad(), B.onShow()路径D->B,D页面销毁触发onUnLoad,B第一次创建触发onLoad

代码示例

在开发者工具中预览效果

建议在开发者工具中的控制台查看,工具与真机略有差异,以真机的生命周期为准。

注意

  • navigateTo、redirectTo 只能打开非 tabBar 页面;
  • switchTab 只能打开 tabBar 页面;
  • reLaunch 可以打开任意页面;
  • 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar;
  • 调用页面路由带的参数可以在目标页面的 onLoad 中获取。