uni-app vue3 defineProps获取不到url链接参数

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app vue3 defineProps获取不到url链接参数

开发环境 版本号 项目创建方式

更新到新版本4.36获取不到,旧版本4.24是能获取到的,现在新版本只能用onload获取参数,defineProps获取到都是undefined

1 回复

uni-app 中使用 Vue 3 时,如果你发现通过 defineProps 获取不到 URL 链接参数,通常是因为 URL 参数并非直接作为组件的 props 传递的。URL 参数通常需要通过 onMountedonLoad 等生命周期钩子函数从页面路由中获取。

下面是一个如何在 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 属性包含了打开当前页面路径中的参数。
  • definePropsuni-app 中通常用于子组件接收父组件传递的 props,而不是用于获取 URL 参数。

通过这种方式,你可以在 uni-app 的 Vue 3 组件中正确地获取 URL 参数,而无需依赖 defineProps。如果你的应用结构复杂,或者需要更灵活的参数传递方式,可以考虑使用全局状态管理(如 Vuex 或 Pinia)来存储和访问参数。

回到顶部