探讨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('页面返回')
  }
相关推荐
web1508509664114 小时前
在uniapp Vue3版本中如何解决webH5网页浏览器跨域的问题
前端·uni-app
何极光1 天前
uniapp小程序样式穿透
前端·小程序·uni-app
User_undefined1 天前
uniapp Native.js 调用安卓arr原生service
android·javascript·uni-app
流氓也是种气质 _Cookie2 天前
uniapp blob格式转换为video .mp4文件使用ffmpeg工具
ffmpeg·uni-app
爱笑的眼睛112 天前
uniapp 极速上手鸿蒙开发
华为·uni-app·harmonyos
鱼樱前端2 天前
uni-app框架核心/常用API梳理一(数据缓存)
前端·uni-app
阿琳a_2 天前
解决uniapp中使用axios在真机和模拟器下请求报错问题
前端·javascript·uni-app
三天不学习2 天前
uni-app 跨端开发精美开源UI框架推荐
ui·uni-app·开源
多客软件佳佳2 天前
便捷的线上游戏陪玩、线下家政预约以及语音陪聊服务怎么做?系统代码解析
前端·游戏·小程序·前端框架·uni-app·交友
洗发水很好用2 天前
uniApp上传文件踩坑日记
uni-app