探讨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('页面返回')
  }
相关推荐
TE-茶叶蛋3 小时前
Uniapp运行MuMu模拟器
uni-app
一人一程温一壶酒5 小时前
微信小程序uniapp开发附源码——图片加水印
微信小程序·uni-app·notepad++
一个假的前端男8 小时前
uniapp 3端轮播
前端·javascript·uni-app
Memory沙漏8 小时前
IOS如何免费申请开发者证书(uniapp开发)
ios·uni-app
集成显卡12 小时前
AI取名大师 | uni-app + Wot UI 跟随设备自动切换明暗主题
人工智能·ui·uni-app·外观配色
zhangyao94033012 小时前
uni-app scroll-view特定情况下运用
前端·javascript·uni-app
LXA080913 小时前
在 UniApp 中为小程序实现视频播放记录功能
小程序·uni-app·音视频
你真的可爱呀13 小时前
【uniapp实践】主题样式配置浅色深色以及自定义
uni-app·sass
小胖学前端15 小时前
解决 uniapp H5 与原生应用通信的坑:一个经过实战验证的解决方案
前端·uni-app
2501_9160074721 小时前
iOS性能调试工具终极指南,从系统底层到多端协同的全方位优化实践(2025版)
android·ios·小程序·https·uni-app·iphone·webview