目录
uniapp实现页面跳转以及跳转后传值过去
一、链接跳转
二、事件跳转
1、uni.navigateTo(OBJECT)
2、uni.redirectTo(OBJECT)
3、uni.reLaunch(OBJECT)
4、uni.switchTab(OBJECT)
【uni-app系列（页面跳转以及传递参数）】5、uni.navigateBack(OBJECT)
三、传值与接收
四、类型转换
4.1 传递json
uniapp实现页面跳转以及跳转后传值过去 开篇注意：
页面跳转的时候，传递的只能是string类型的，现实中如果想要传递json、Array记得需要先转成string传递，传递接收后再转回来使用（详见四、类型转换）。
一、链接跳转 链接跳转是通过navigator标签来实现的
点击传递参数 二、事件跳转 用某个事件的函数，来实现跳转需求
1、uni.navigateTo(OBJECT) 功能：
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
参数
文章图片
代码
uni.navigateTo({
url: 'test?id=1&name=uniapp'/*这是跳转到的页面路径，？id=1这些都是传递的数据，可以直接在test页面接受
});
2、uni.redirectTo(OBJECT) 功能：
关闭当前页面，跳转到应用内的某个页面
参数
文章图片
代码
uni.redirectTo({
url: 'test?id=1'
});
3、uni.reLaunch(OBJECT) 功能：
关闭所有页面，打开到应用内的某个页面
参数
文章图片
代码
uni.reLaunch({
url: 'test?id=1'
});
4、uni.switchTab(OBJECT) 功能：
跳转到tabbar页面，并关闭其他所有的非tabbar页面。
参数
文章图片
代码
pages.json中：
{
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
},{
"pagePath": "pages/other/other",
"text": "其他"
}]
}
}vue事件代码函数中：
uni.switchTab({
url: '/pages/index/index'
});
5、uni.navigateBack(OBJECT) 功能：
关闭当前页面，返回上一个或者上几个页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
参数
文章图片
代码
// 此处是A页面
uni.navigateTo({
url: 'B?id=1'
});
// 此处是B页面
uni.navigateTo({
url: 'C?id=1'
});
// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
delta: 2
});
三、传值与接收 通过跳转传值一般套路就是在URL中把需要传的值带过去，然后再接收的页面onLoad函数中，利用参数接回来。
跳转页面：
uni.navigateTo({
url:'页面路径?id=1'
})接收页面：
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
console.log(option.id);
//打印出上个页面传递的参数。传递的是id=1，则获取到的就是option.id
}四、类型转换 如开题所说，因为URL传递的只能是字符串，传递JSON、ARRAY不是字符串时候需要先转成字符串，然后接收后再换回来。
4.1 传递json 传递时候：
在传递的地方，
var mynavData = https://www.it610.com/article/JSON.stringify(that.navData);
// 这里转换成 字符串
uni.navigateTo({
url:'./nav?index='+mynavData
})新页面接收后：
onLoad(options) {
var data = https://www.it610.com/article/JSON.parse(options.index);
// 字符串转对象
console.log(data)
}推荐阅读
- 微信小程序|微信小程序学习之旅--第一个页面的制作
- uni-app技术分享| uni-app转小程序-实时消息
- uni-app技术分享| uni-app常见问题
- #yyds干货盘点# uni-app 模拟机调试环境搭建
- uni-app技术分享| 用uni-app实现拖动的诀窍
- uni-app技术分享|开源demo视频呼叫arcall uni-app端技术实现
- uni-app下拉刷新加载刷新数据
- uni-app视频组件设置圆角
- uni-app中scroll-view中无法滚动的问题