探讨uniapp的路由与页面生命周期问题

1 首先我们引入页面路由

2 页面生命周期函数

java 复制代码
onLoad() {
     console.log('页面加载')
 },
 onShow() {
     console.log('页面显示')
 },
 onReady(){
      console.log('页面初次显示')
  },
  onHide() {
      console.log('页面隐藏')
  },
  onUnload() {
      console.log('页面卸载')
  },
  onBackPress(){
     console.log('页面返回')
  }

3 页面跳转

保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。

navigateTo 跳转到新的页面:

这时我们执行 navigateBack 页面回退操作:

3.1 redirect

关闭当前页面,跳转到应用内的某个页面。

3.1 switchTab

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

我们点击一下下面的tarbar按钮观察变化:与上面的执行行为保持一致。

3.1 reLaunch

关闭所有页面,打开到应用内的某个页面。
首先我们验证tarbar页面:

验证非tarbar页面 与上面保持一致

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

执行声明周期函数:

java 复制代码
  onBackPress(){
     console.log('页面返回')
  }
相关推荐
2501_9159184112 分钟前
中小团队发布,跨平台 iOS 上架,证书、描述文件创建管理,测试分发一体化方案
android·ios·小程序·https·uni-app·iphone·webview
家里有只小肥猫42 分钟前
uniApp打包ios报错
ios·uni-app
jingling5552 小时前
uniapp | 基于高德地图实现位置选择功能(安卓端)
android·前端·javascript·uni-app
某公司摸鱼前端2 小时前
前端一键部署网站至服务器FTP
前端·javascript·uni-app
爱怪笑的小杰杰2 小时前
UniApp 桌面应用实现 Android 开机自启动(无原生插件版)
android·java·uni-app
m0_647057962 小时前
uniapp使用rich-text流式 Markdown 换行问题与解决方案
前端·javascript·uni-app
木子啊3 小时前
Uni-app导航栏适配终极避坑指南
uni-app·自定义导航栏·导航栏
2501_915106323 小时前
iOS 如何绕过 ATS 发送请求,iOS调试
android·ios·小程序·https·uni-app·iphone·webview
行走的陀螺仪14 小时前
uni-app + Vue3编辑页/新增页面给列表页传参
前端·vue.js·uni-app
森之鸟16 小时前
uniapp——配置鸿蒙环境,进行真机调试
华为·uni-app·harmonyos