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