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

网友投稿 4897 2023-11-14

目录一、uni.navigateTo(OBJECT)二、uni.navigateBack(OBJECT)三、uni.redirectTo(OBJECT)四、uni.switchTab(BOJECT)五、openURL补充:传值与接收总结

一、uni.navigateTo(OBJECT)

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

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

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小时内删除侵权内容。

上一篇:开发手机app软件需要多长时间?
下一篇:开发一款跑腿app必须知道的3点常见知识
相关文章

 发表评论

暂时没有评论,来抢沙发吧~