uni-app系列（页面跳转以及传递参数） uni-app

目录

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函数中，利用参数接回来。
跳转页面：