探讨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('页面返回')
  }
相关推荐
七七小报1 小时前
uniapp-商城-36-shop 购物车 选好了 进行订单确认2 支付方式颜色变化和颜色滤镜filter
uni-app
lh_12541 小时前
uniapp 常用开发技巧与实战指南
uni-app
某公司摸鱼前端2 小时前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_2 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
晨集2 小时前
Uni-App 多端电子合同开源项目介绍
java·spring boot·uni-app·电子合同
盛夏绽放5 小时前
uni-app中获取用户实时位置完整指南:解决权限报错问题
uni-app·notepad++
xixixin_6 小时前
【uniapp】vue2 搜索文字高亮显示
java·服务器·前端·uni-app·交互·文字高亮
一夜枫林12 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
良艺呐^O^12 小时前
uniapp实现app自动更新
开发语言·javascript·uni-app
thigh_d1 天前
uniapp 安卓离线本地打包,Android Studio生成apk包
android·uni-app·android studio