uni-app vue3 defineProps获取不到url链接参数
uni-app vue3 defineProps获取不到url链接参数
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
更新到新版本4.36获取不到,旧版本4.24是能获取到的,现在新版本只能用onload获取参数,defineProps获取到都是undefined
1 回复
在 uni-app
中使用 Vue 3 时,如果你发现通过 defineProps
获取不到 URL 链接参数,通常是因为 URL 参数并非直接作为组件的 props 传递的。URL 参数通常需要通过 onMounted
或 onLoad
等生命周期钩子函数从页面路由中获取。
下面是一个如何在 uni-app
的 Vue 3 组件中获取 URL 参数的示例代码。
1. 在页面组件中获取 URL 参数
假设你有一个页面组件 MyPage.vue
,并且你希望从这个页面的 URL 中获取参数。
<template>
<view>
<text>URL 参数 id: {{ id }}</text>
<text>URL 参数 name: {{ name }}</text>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { getCurrentPages } from '@dcloudio/uni-app';
const id = ref(null);
const name = ref(null);
onMounted(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
const options = currentPage.options;
// 假设 URL 是这样的:/pages/MyPage/MyPage?id=123&name=JohnDoe
id.value = options.id;
name.value = options.name;
});
</script>
<style scoped>
/* 你的样式 */
</style>
2. 在导航到该页面时传递参数
通常你会从另一个页面或组件导航到 MyPage
并传递参数。例如:
// 在另一个组件或页面中
uni.navigateTo({
url: `/pages/MyPage/MyPage?id=123&name=JohnDoe`
});
注意事项
getCurrentPages()
方法用于获取当前页面栈的实例数组,数组最后一个元素即为当前页面实例。options
属性包含了打开当前页面路径中的参数。defineProps
在uni-app
中通常用于子组件接收父组件传递的 props,而不是用于获取 URL 参数。
通过这种方式,你可以在 uni-app
的 Vue 3 组件中正确地获取 URL 参数,而无需依赖 defineProps
。如果你的应用结构复杂,或者需要更灵活的参数传递方式,可以考虑使用全局状态管理(如 Vuex 或 Pinia)来存储和访问参数。