uni-app中vue3的setup在小程序中获取不到参数
uni-app中vue3的setup在小程序中获取不到参数
示例代码：
navigateTo(`pages/xxx?id=${id}`);
setup(obj) {
console.log(obj);
return { };
}操作步骤：
- 写代码，在钉钉小程序运行
预期结果：
- 能打印出来
实际结果：
- 打印出来是空的对象
bug描述：
用navigateTo跳转"?id=${id}"，然后在h5端在setup(obj)里面通过这个obj可以拿到id的参数，但是在钉钉小程序获取不到
| 项目信息 | 详情 |
|------------------|------------------|
| 产品分类 | uniapp/小程序/阿里 |
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | 10 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.4.7 |
| 第三方开发者工具版本号 | 最新版 |
| 基础库版本号 | 最新版 |
| 项目创建方式 | HBuilderX |
我是这样写的 <template>111</template>
<script> export default { setup(obj) { console.log(obj); }, }; </script> <style></style>
https://uniapp.dcloud.io/tutorial/migration-to-vue3.html#url-search-params 官方文档是这样写的，你是不少写东西了
在 uni-app 中使用 Vue 3 的 setup 函数时，如果你在小程序中无法获取到参数，可能是由于以下几个原因导致的。以下是一些常见的解决方案：
1. 确保正确传递参数
首先，确保你在页面跳转时正确传递了参数。例如，使用 uni.navigateTo 跳转时，应该这样传递参数：
uni.navigateTo({
url: '/pages/detail/detail?id=123'
});2. 在 setup 中获取参数
在 setup 函数中，你可以通过 onLoad 生命周期钩子来获取页面参数。onLoad 是页面加载时触发的生命周期函数，可以在这里获取到传递的参数。
import { onLoad } from '@dcloudio/uni-app';
export default {
setup() {
onLoad((options) => {
console.log('页面参数:', options);
const id = options.id; // 获取传递的参数
// 其他逻辑处理
});
return {};
}
};3. 使用 useRouter 获取参数
如果你使用的是 uni-app 的 vue3 版本，并且已经引入了 @dcloudio/uni-app 的 useRouter，你可以通过 useRouter 来获取当前页面的路由信息，包括参数。
import { useRouter } from '@dcloudio/uni-app';
export default {
setup() {
const router = useRouter();
const route = router.currentRoute.value;
console.log('页面参数:', route.query);
const id = route.query.id; // 获取传递的参数
return {};
}
};4. 检查 uni-app 版本
确保你使用的 uni-app 版本支持 Vue 3 和 setup 函数。如果你使用的是较旧的版本，可能需要升级到最新版本。
5. 检查小程序平台兼容性
某些小程序平台（如微信小程序）可能对 Vue 3 的支持存在一些限制或问题。确保你使用的 uni-app 版本和 Vue 3 版本在小程序平台上是兼容的。
6. 使用 onShow 生命周期
如果你在 onLoad 中无法获取到参数，可以尝试在 onShow 生命周期中获取参数。onShow 是页面显示时触发的生命周期函数。
import { onShow } from '@dcloudio/uni-app';
export default {
setup() {
onShow(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
const options = currentPage.options;
console.log('页面参数:', options);
const id = options.id; // 获取传递的参数
// 其他逻辑处理
});
return {};
}
};7. 使用 getCurrentPages 获取参数
你也可以使用 getCurrentPages 方法来获取当前页面栈中的页面实例，然后从页面实例中获取参数。
export default {
setup() {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
const options = currentPage.options;
console.log('页面参数:', options);
const id = options.id; // 获取传递的参数
return {};
}
};