uni-app 页面参数获取问题与修复

问题描述

在 uni-app Vue 3 setup 环境中，页面跳转时传递的参数（如 id）在 onMounted 钩子中无法正确获取，导致控制台无输出或功能异常。

问题原因

最初尝试使用 getCurrentPages() 获取当前页面的 options 参数，但这种方法在 uni-app 的 Vue 3 setup 中不可靠。页面参数应在页面生命周期的 onLoad 钩子中获取，而不是在 onMounted 中通过全局方法获取。

解决方法

导入 onLoad 钩子：import { onLoad } from '@dcloudio/uni-app'
定义响应式参数对象：const query = ref<Record<string, string>>({})

在 onLoad 中设置参数：

onLoad((options) => {
 query.value = options || {}
})

在 onMounted 中使用 query.value.id 检查和处理参数。

经验教训

uni-app 中，页面参数的获取必须使用 onLoad 钩子，这是页面生命周期的标准方式。
避免使用 getCurrentPages() 来获取参数，尤其在 Vue 3 setup 中。
确保参数处理逻辑在正确的生命周期钩子中执行，以保证数据可用性。
调试时，可在 onLoad 和 onMounted 中添加 console.log 来验证参数获取时机。

相关代码片段

import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const query = ref<Record<string, string>>({})

onLoad((options) => {
  query.value = options || {}
})

onMounted(async () => {
  const id = query.value.id || ''
  if (id) {
    console.log('Detected id:', id)
    // 处理编辑逻辑
  }
})