小程序开发设计如何实现跨平台开发与管理满足企业多元化需求
4998
2023-11-14
uni-app常用的几种页面跳转方式总结
−目录一、uni.navigateTo(OBJECT)二、uni.navigateBack(OBJECT)三、uni.redirectTo(OBJECT)四、uni.switchTab(BOJECT)五、openURL补充：传值与接收总结
一、uni.navigateTo(OBJECT)
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
uni.navigateTo(OBJECT) | uni-app官网 (dcloud.io)
?
1
2
3
4
5
6
7
8
9
methods: {
//gonavigate()为点击响应事件，可在HTML部分设置 @tap="gonavigate()"
gonavigate(){
uni.navigateTo({
//保留当前页面，跳转到应用内的某个页面
url: /pages/detail/detail
})
}
}
二、uni.navigateBack(OBJECT)
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
uni.navigateTo(OBJECT) | uni-app官网 (dcloud.io)
三、uni.redirectTo(OBJECT)
关闭当前页面，跳转到应用内的某个页面。
uni.navigateTo(OBJECT) | uni-app官网 (dcloud.io)
?
1
2
3
4
5
6
7
8
9
methods: {
//goregirect()为点击响应事件，可在HTML部分设置 @tap="goregirect()"
goregirect(){
uni.redirectTo({
//关闭当前页面，跳转到应用内的某个页面。
url:/pages/about/about
});
}
}
四、uni.switchTab(BOJECT)
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.navigateTo(OBJECT) | uni-app官网 (dcloud.io)
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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)
?
1
2
3
4
5
6
methods: {
//goopenurl()为点击响应事件，可在HTML部分设置 @tap="goopenurl()"
goopenurl(){
boid plus.runtime.openURL(https://www.baidu.com/)
}
}
补充：传值与接收
通过跳转传值一般套路就是在URL中把需要传的值带过去，然后再接收的页面onLoad函数中，利用参数接回来。
跳转页面：
?
1
2
3
uni.navigateTo({
url:页面路径?id=1
})
接收页面：
?
1
2
3
4
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
console.log(option.id);
//打印出上个页面传递的参数。传递的是id=1，则获取到的就是option.id
}
总结
您可能感兴趣的文章:浅谈uniapp页面跳转的解决方案详解uniapp页面跳转URL传参大坑Unity打开淘宝app并跳转到商品页面功能的实现方法uniapp页面跳转的五种方式总结
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~