uni-app 页面跳转有哪些方法
时间:2021-09-24
来源:互联网
今天PHP爱好者给大家带来跳转方法:1、使用“uni.navigateTo(OBJECT)”;2、使用“uni.redirectTo(OBJECT)”;3、使用“uni.reLaunch(OBJECT)”;4、使用“uni.switchTab(OBJECT)”等。
本教程操作环境:windows7系统、uni-app2.5.1版,DELL G3电脑。
uni-app 页面跳转主要有下面5个方法完成。分别如下:
(1)uni.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面
(2)uni.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面
(3)uni.reLaunch(OBJECT) 关闭所有页面,打开到应用内的某个页面
(4)uni.switchTab(OBJECT) 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
(5)uni.navigateBack(OBJECT) 关闭当前页面,返回上一页面或多级页面
uni.navigateTo(OBJECT)
保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。OBJECT参数说明:参数类型必填说明urlString是需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
export default {
onLoad: function (option) {
console.log(option.id);
console.log(option.name);
}
}
uni.redirectTo(OBJECT)
关闭当前页面,跳转到应用内的某个页面。OBJECT参数说明参数类型必填说明urlString是需要跳转的应用内非 tabBar 的页面的路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;
uni.redirectTo({
url: 'test?id=1' // 传递参数 id,值为1
});
uni.reLaunch(OBJECT)
关闭所有页面,打开到应用内的某个页面。OBJECT参数说明:参数类型必填说明urlString是需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;
uni.reLaunch({
url: 'test?id=1'
});
export default {
onLoad: function (option) {
console.log(option.query);
}
}
uni.switchTab(OBJECT)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。OBJECT参数说明:参数类型必填说明urlString是需要跳转的 tabBar 页面的路径(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数
pages.json{
"tabBar": {
"list": [
{
"pagePath": "index",
"text": "首页"
},{
"pagePath": "other",
"text": "其他"
}]
}
}
other.vueuni.switchTab({
url: 'index'
});
uni.navigateBack(OBJECT)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。OBJECT参数说明:参数类型必填说明deltaNumber1返回的页面数,如果 delta 大于现有页面数,则返回到首页。
uni.navigateTo({
url: 'B?id=1'
});
uni.navigateTo({
url: 'C?id=1'
});
uni.navigateBack({
delta: 2
});
以上就是uni-app如何跳转页面的详细内容,更多请关注php爱好者其它相关文章!
-
Android中RequestCode和ResultCode的区别和使用场景 时间:2025-08-22
-
控件未注册是什么原因 控件未注册怎么解决 时间:2025-08-22
-
C语言和Java中switch case用法详解 时间:2025-08-22
-
MySQL数据库中外键(foreign key)用法详解(定义和作用、创建规则、语法示例、应用场景) 时间:2025-08-22
-
C语言条件编译的三种格式及用法详解 时间:2025-08-22
-
CSS中text-decoration属性详解(含义、用法) 时间:2025-08-22
今日更新
-
造梦西游3唐僧最强技能搭配推荐 技能加点攻略与实战解析
阅读:18
-
造梦西游3唐僧最强技能搭配推荐 高输出暴力流加点方案
阅读:18
-
造梦西游3孙悟空最强技能搭配推荐 高爆发连招攻略大全
阅读:18
-
造梦西游3唐僧最强玩法攻略 技能加点装备搭配全解析
阅读:18
-
造梦西游3孙悟空技能大全 最强技能搭配与加点攻略
阅读:18
-
造梦西游3孙悟空最强技能搭配推荐 高爆发连招攻略分享
阅读:18
-
造梦西游3水下迷宫入口位置及进入方法详细攻略
阅读:18
-
造梦西游3水下迷宫通关路线图解 快速找到BOSS打法技巧
阅读:18
-
造梦西游3水下迷宫位置详解及快速通关技巧分享
阅读:18
-
造梦西游3水下迷宫通关攻略 最全路线图与技巧详解
阅读:18