uni-app常用的几种页面跳转方式总结

作者:丿TK丶灬丨爱悦 时间:2023-08-23 20:31:26 

一、uni.navigateTo(OBJECT)

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

uni.navigateTo(OBJECT) | uni-app官网 (dcloud.io)

methods: {
   //gonavigate()为点击响应事件,可在HTML部分设置 @tap="gonavigate()"
   gonavigate(){
       uni.navigateTo({
           //保留当前页面,跳转到应用内的某个页面
           url: '/pages/detail/detail'
       })
   }
}

二、uni.navigateBack(OBJECT)

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

uni.navigateTo(OBJECT) | uni-app官网 (dcloud.io)

methods: {
   //goBack()为点击响应事件,可在HTML部分设置 @tap="goBack()"
   goBack(){
       uni.navigateBack({
           //关闭当前页面,返回上一页面或多级页面。
           delta:1
       });
   }
}

三、uni.redirectTo(OBJECT)

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

uni.navigateTo(OBJECT) | uni-app官网 (dcloud.io)

methods: {
   //goregirect()为点击响应事件,可在HTML部分设置 @tap="goregirect()"
   goregirect(){
       uni.redirectTo({
           //关闭当前页面,跳转到应用内的某个页面。
           url:'/pages/about/about'
       });
   }
}

四、uni.switchTab(BOJECT)

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

uni.navigateTo(OBJECT) | uni-app官网 (dcloud.io)

methods: {
   checklogin(){
       uni.request({
           url: 'http://localhost:8081/api/user/login',
           data: {
email: this.emailone,
password: this.password,
},
success: (res) => {
   //登录成功
if (res.data.success == true) {
uni.showToast({
title: '登录成功', //显示的文字
icon: 'success' //显示的图标
   });
   //跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
uni.switchTab({
url: '../tabbor/index/index'
});
} else {
uni.showToast({
title: '用户名或密码错误', //显示的文字
icon: 'none' //显示的图标
});
}
           }
       })    
}
}

五、openURL

调用第三方程序打开指定的URL

HTML5+ API Reference (html5plus.org)

methods: {
   //goopenurl()为点击响应事件,可在HTML部分设置 @tap="goopenurl()"
   goopenurl(){
       boid plus.runtime.openURL('https://www.baidu.com/')
   }
}

补充:传值与接收

通过跳转传值一般套路就是在URL中把需要传的值带过去,然后再接收的页面onLoad函数中,利用参数接回来。

跳转页面:

uni.navigateTo({
  url:'页面路径?id=1'
})

接收页面:

onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
       console.log(option.id);
//打印出上个页面传递的参数。传递的是id=1,则获取到的就是option.id
   }

来源:https://blog.csdn.net/qq_53966033/article/details/124538656

标签:uni-app,页面,跳转
0
投稿

猜你喜欢

  • 从JavaScript的函数重名看其初始化方式

    2023-07-16 22:00:12
  • 国际上十四个优秀网页设计审核站

    2007-09-30 20:18:00
  • 彻底弄懂CSS盒子模式之四(绝对定位和相对定位)

    2007-05-11 16:51:00
  • SQL Server导入导出数据方法

    2007-08-17 09:50:00
  • asp中最新新闻显示new图片的实现代码

    2012-11-30 20:31:42
  • ASP运行出错:缺少对象: xmlDoc.documentElement错误解决方法

    2012-11-30 20:40:52
  • Dreamweaver MX弹出窗口全攻略

    2010-09-05 21:14:00
  • PHP设计模式中观察者模式详解

    2023-05-27 04:43:31
  • 再读《你是一个职业的页面重构工作者吗?》

    2009-02-11 12:22:00
  • 合理设置内存让数据库与其他程序共存

    2009-05-21 16:24:00
  • 分享十款最出色的PHP安全开发库中文详细介绍

    2023-06-15 01:04:59
  • oracle 分页 很棒的sql语句

    2009-07-02 11:44:00
  • asp如何验证IP地址?

    2010-06-10 18:37:00
  • IE下,事件触发那点破烂事儿

    2009-04-27 12:31:00
  • CSS Position

    2009-05-17 14:27:00
  • javascript面向对象技术基础(三)

    2010-02-07 13:11:00
  • 如何使用 SQL Server 数据库查询累计值

    2008-12-03 15:27:00
  • 在阿里云服务器上配置CentOS+Nginx+Python+Flask环境

    2023-07-26 09:47:46
  • Oracle 数据 使用游标

    2009-07-02 12:14:00
  • 教你如何使用Python开发一个钉钉群应答机器人

    2023-08-03 17:44:16
  • asp之家 网络编程 m.aspxhome.com