uniapp获取上一个页面传进来的id

admin 2026年02月07日 11:19 101 0

在uniapp中，获取上一个页面传递的id通常通过URL参数实现，跳转页面时，使用uni.navigateTo的url参数拼接id，如url: '/pages/detail/detail?id=123'，目标页面在onLoad生命周期函数中接收参数，通过options.id即可获取传来的值，若id为数字类型，需用Number()转换；若为复杂对象，可先JSON.stringify序列化后再传参，此方法简单高效，适合页面间简单数据传递，注意onLoad仅在页面加载时触发一次，确保数据获取逻辑正确。

Uniapp 获取上一个页面传递的ID值：完整指南与最佳实践

在Uniapp开发过程中,页面间数据传递是构建应用的核心功能之一，特别是在列表页跳转到详情页的场景中，如何准确传递并获取当前条目的ID值至关重要，本文将系统介绍Uniapp中各种页面跳转场景下的ID传递方法，包括非tabBar页面、tabBar页面以及特殊场景的处理技巧，并提供完整的代码示例和最佳实践建议。

基础场景：非tabBar页面间传递ID

非tabBar页面跳转是Uniapp中最常用的页面跳转方式,主要通过URL的query参数实现数据传递，这种方式简单高效，适用于大多数普通页面间的数据传递需求。

1 跳转页面传递ID

以下是一个典型的列表页实现,点击列表项时携带ID参数跳转到详情页：

<template>
  <view class="container">
    <view 
      v-for="item in productList" 
      :key="item.id" 
      class="list-item"
      @click="navigateToDetail(item.id)"
    >
      <image :src="item.image" mode="aspectFill"></image>
      <text class="item-name">{{ item.name }}</text>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      productList: [
        { id: 101, name: '智能手机', image: '/static/phone1.jpg' },
        { id: 102, name: '笔记本电脑', image: '/static/laptop1.jpg' },
        { id: 103, name: '智能手表', image: '/static/watch1.jpg' }
      ]
    }
  },
  methods: {
    navigateToDetail(id) {
      // 基础方式：直接拼接URL
      uni.navigateTo({
        url: `/pages/detail/detail?id=${id}`,
        success: () => {
          console.log('跳转成功，传递ID:', id)
        },
        fail: (err) => {
          console.error('跳转失败:', err)
        }
      })
      // 处理特殊字符的情况
      // if (typeof id === 'string' && /[&=]/.test(id)) {
      //   uni.navigateTo({
      //     url: `/pages/detail/detail?id=${encodeURIComponent(id)}`
      //   })
      // }
    }
  }
}
</script>
<style scoped>
.container {
  padding: 20rpx;
}
.list-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1px solid #eee;
}
.list-item image {
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 8rpx;
}
.item-name {
  font-size: 28rpx;
  color: #333;
}
</style>

2 目标页面接收ID

详情页通过onLoad生命周期函数接收传递的ID参数：

<template>
  <view class="detail-container">
    <view v-if="loading" class="loading">
      <text>加载中...</text>
    </view>
    <view v-else>
      <view class="header">
        <text class="product-name">{{ productDetail.name }}</text>
        <text class="product-id">ID: {{ productId }}</text>
      </view>
      <image :src="productDetail.image" mode="widthFix" class="product-image"></image>
      <view class="description">
        <text>{{ productDetail.description }}</text>
      </view>
      <button @click="goBack" class="back-btn">返回列表</button>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      productId: null,
      productDetail: {},
      loading: true
    }
  },
  onLoad(options) {
    // 获取传递的ID参数
    this.productId = options.id ? Number(options.id) : null
    if (!this.productId) {
      uni.showToast({
        title: '缺少商品ID',
        icon: 'none'
      })
      return
    }
    this.fetchProductDetail()
  },
  methods: {
    async fetchProductDetail() {
      try {
        // 模拟API请求
        await new Promise(resolve => setTimeout(resolve, 1000))
        // 实际项目中应替换为真实API调用
        // const res = await uni.request({
        //   url: `https://api.example.com/products/${this.productId}`,
        //   method: 'GET'
        // })
        // 模拟数据
        this.productDetail = {
          id: this.productId,
          name: `商品${this.productId}`,
          image: '/static/product.jpg',
          description: '这里是商品的详细描述信息...'
        }
        this.loading = false
      } catch (error) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
        console.error('获取商品详情失败:', error)
      }
    },
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>
<style scoped>
.detail-container {
  padding: 20rpx;
}
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400rpx;
}
.header {
  margin-bottom: 20rpx;
}
.product-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}
.product-id {
  font-size: 24rpx;
  color: #999;
}
.product-image {
  width: 100%;
  height: 400rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}
.description {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 40rpx;
}
.back-btn {
  background-color: #007AFF;
  color: white;
  border-radius: 8rpx;
}
</style>

3 关键注意事项

参数类型转换：URL传递的参数会被自动解析为字符串，如果需要数字类型，务必使用Number()进行转换。
特殊字符处理：当ID包含中文、空格、&、等特殊字符时，跳转前需要使用encodeURIComponent()编码，接收时使用decodeURIComponent()解码。
参数验证：在目标页面接收参数时，建议进行有效性验证，避免因参数缺失或格式错误导致应用异常。
性能优化：对于频繁的页面跳转，可以考虑使用预加载技术提升用户体验。

特殊场景：tabBar页面间传递ID

uni.switchTab用于跳转到tabBar页面，但官方限制其URL不能携带query参数，这时需要采用其他方式传递数据。

1 使用全局变量传递ID

// 跳转页面（非tabBar页）
methods: {
  navigateToTabDetail(id) {
    const app = getApp()
    // 存储ID到全局变量
    app.globalData.currentTabId = id
    uni.switchTab({
      url: '/pages/tabDetail/tabDetail',
      success: () => {
        console.log('成功切换到tabBar页面，传递ID:', id)
      }
    })
  }
}

<!-- tabBar目标页面 (tabDetail.vue) -->
<script>
export default {
  data() {
    return {
      tabId: null,
      tabData: {}
    }
  },
  onShow() {
    // 从全局变量获取ID
    const app = getApp()
    this.tabId = app.globalData.currentTabId
    if (this.tabId) {
      this.fetchTabData()
    }
  },
  methods: {
    fetchTabData() {
      console.log('tabBar页面ID:', this.tabId)
      // 根据ID加载数据
      // 实际项目中调用API获取数据
    }
  }
}
</script>

标签： #uniapp #页面传 #参id #数据获取