uni-app常用的几种页面跳转方式总结
一、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
}
总结
到此这篇关于uni-app常用的几种页面跳转方式的文章就介绍到这了,更多相关uni-app页面跳转方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
IE中document.createElement的iframe无法设置属性name的解决方法
这篇文章主要介绍了IE中document.createElement的iframe无法设置属性name的解决方法,需要的朋友可以参考下2015-09-09
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
这篇文章主要介绍了JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)的相关资料,需要的朋友可以参考下2016-02-02
JavaScript的new date等日期函数在safari中遇到的坑
safari中对于JavaScript的new Date函数的支持有一个比较奇怪的问题,带着这个奇怪的问题我们通过本文一起学习吧2016-10-10
浅谈js使用in和hasOwnProperty获取对象属性的区别
下面小编就为大家带来一篇浅谈js使用in和hasOwnProperty获取对象属性的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-04-04


最新评论