探讨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('页面返回')
  }
相关推荐
骑450的皮卡丘4 小时前
uniapp设置 overflow:auto;右边不显示滚动条的问题
css·uni-app·css3
lqj_本人4 小时前
鸿蒙OS&UniApp实现个性化的搜索框与搜索历史记录#三方框架 #Uniapp
华为·uni-app·harmonyos
lqj_本人4 小时前
鸿蒙OS&UniApp制作多选框与单选框组件#三方框架 #Uniapp
前端·javascript·uni-app
Aress"7 小时前
【ios越狱包安装失败?uniapp导出ipa文件如何安装到苹果手机】苹果IOS直接安装IPA文件
ios·uni-app·ipa安装
爱宇阳7 小时前
UniApp 在华为三折叠屏中的适配问题与最佳解决方案(rpx 实战指南)
uni-app
山河故人1637 小时前
uniapp使用npm下载
前端·npm·uni-app
于慨15 小时前
uniapp+vite+cli模板引入tailwindcss
前端·uni-app
lqj_本人19 小时前
鸿蒙OS&UniApp 制作简洁高效的标签云组件#三方框架 #Uniapp
uni-app
不爱吃饭爱吃菜19 小时前
uniapp微信小程序-长按按钮百度语音识别回显文字
前端·javascript·vue.js·百度·微信小程序·uni-app·语音识别
前端 贾公子21 小时前
uniapp -- 验证码倒计时按钮组件
前端·vue.js·uni-app