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 = JSON.stringify(that.navData); // 这里转换成 字符串
uni.navigateTo({
url:’./nav?index=’+mynavData
})
新页面接收后:

onLoad(options) {
var data = JSON.parse(options.index); // 字符串转对象
console.log(data)