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

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

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

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

1 回复

更多关于uni-app vue3 defineProps获取不到url链接参数的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 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）来存储和访问参数。

回到顶部