一篇文章轻松搞定uni-app跳转传值uni-app跳转传值uni-app跳转传值uni-app跳转传值uni-app跳

uni-app中进行页面跳转

页面跳转

在 uni-app 中，页面跳转的方式有以下几种：

使用 navigateTo 方法进行跳转：
```
uni.navigateTo({
   url: '/pages/home/home'
});
```
navigateTo 方法会保留当前页面，允许用户返回到前一个页面。新页面的打开方式是左右切换的，可以在跳转页面时携带参数。
使用 redirectTo 方法进行跳转：
```
uni.redirectTo({
   url: '/pages/home/home'
});
```
redirectTo 方法会关闭当前页面，跳转到应用程序中的指定页面。新页面的打开方式是动画切换的，也可以在跳转页面时携带参数。
使用 reLaunch 方法进行跳转：
```
uni.reLaunch({
   url: '/pages/home/home'
});
```
reLaunch 方法会关闭所有页面，打开应用程序中的指定页面。新页面的打开方式是动画切换的，也可以在跳转页面时携带参数。
使用 switchTab 方法进行跳转：
```
uni.switchTab({
   url: '/pages/home/home'
});
```
switchTab 方法主要用于跳转到应用程序的底部菜单栏中的指定页面，必须在应用程序的 tabBar 中定义对应的路径，否则该方法将无法使用。

跳转传参

在页面跳转时候利用url进行传参

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});

onLoad((option) =>{ //option为object类型，会序列化上个页面传递的参数
    console.log(option.id)
    console.log(option.name)
})

如果参数太长，可以使用encodeURIComponent

// 使用encodeURIComponent和JSON.stringify对对象进行编码和序列化
let encodedObj = encodeURIComponent(JSON.stringify(searchObject.value));

uni.navigateTo({
    url: `/pages/home?obj=${encodedObj}`,
  });

// 获取传递过来的参数(对象)
const getObj = (options) => {
  searchObj.value = JSON.parse(decodeURIComponent(options.obj));
  console.log('接收到的参数:', searchObj.value);
};

利用uni.$on和uni.$emit实现页面通信

// 页面1发送事件，并传递参数
 uni.navigateBack({
    delta: 1, // 回退的层数
    success: () => {
      uni.$emit('dataBack', {
        regionId: id,
        titleFull: showCity.value,
        children: item,
      })
    },
  })

// 页面2接收参数
onLoad(() => {
   uni.$on('dataBack', function (data) {
    searchObject.value.region = data.regionId;
    address.value = data.titleFull;
    searchObject.value.cityChildren = data.children;
 });
})