uniapp里跳转导航如何携带图片参数供被跳转的页面使用

在Uniapp中，可以使用uni.navigateTo或uni.redirectTo函数进行页面跳转。要在跳转时携带图片参数，可以将图片信息保存在跳转时携带的参数中，然后在跳转后的页面中获取参数并使用图片信息。

以下是一个示例代码：

// 在当前页面跳转到目标页面，并携带图片参数
uni.navigateTo({
  url: '/pages/targetPage/targetPage?imgUrl=' + encodeURIComponent('http://example.com/image.jpg'),
});

// 在目标页面中获取图片参数并使用
<template>
  <image :src="imgUrl"></image>
</template>

<script>
export default {
  computed: {
    imgUrl() {
      return decodeURIComponent(this.$route.query.imgUrl);
    },
  },
};
</script>

在上面的示例中，我们使用encodeURIComponent函数对图片URL进行编码，以便在URL中传递。在目标页面中，我们使用this.$route.query.imgUrl获取传递的图片URL，并使用computed属性将其转换为可用的图片地址。然后，我们可以在模板中使用imgUrl属性显示图片。

相关问题

uniapp实现跳转页面时携带参数

在UniApp中，要实现在页面跳转时携带参数，可以使用`uni.navigateTo`或`uni.reLaunch`方法，并在URL中附加查询字符串（query string）来传递参数。这里有两个不同的场景：

1. **使用`uni.reLaunch`**:
如果你想重新加载整个应用并携带参数，通常用于返回主页或重要操作后，可以这样做[^1]:

   uni.reLaunch({
     url: '/pages/index/index?param1=value1&param2=value2',
   });

这样，当跳转到`index`页面时，可以通过`onLoad`生命周期钩子从`options`中获取这些参数。

2. **使用`uni.navigateTo`**:
如果只需要导航到另一个内部页面而不改变应用的状态，可以这样传递参数:

   uni.navigateTo({
     url: '/pages/detail/detail?id=123',
   });

在接收页面的`onLoad`或`onShow`中，可以获取参数：

   onLoad({ options }) {
     if (options.query.id) {
       // 处理id参数
     }
   },

在`options`对象中，查询参数会被自动解析为`options.query`属性。

uniapp页面跳转

在uniapp中，可以使用以下方式进行页面跳转：

1. 使用uniapp自带的navigateTo方法进行页面跳转

uni.navigateTo({
  url: '/pages/xxx/xxx'
})

2. 使用uniapp自带的redirectTo方法进行页面跳转

uni.redirectTo({
  url: '/pages/xxx/xxx'
})

3. 使用uniapp自带的reLaunch方法进行页面跳转（关闭所有页面，打开到应用内的某个页面）

uni.reLaunch({
  url: '/pages/xxx/xxx'
})

4. 使用uniapp自带的switchTab方法进行页面跳转（切换底部导航栏页面）

uni.switchTab({
  url: '/pages/xxx/xxx'
})

其中，url参数为跳转的页面路径，路径需要写成相对路径，以/开头。例如：/pages/xxx/xxx。