通过不同方式在 Vue 3 中传递路由参数

如何通过不同方式在 Vue 3 中传递路由参数,并在组件中使用 defineProps 或其他组合式 API 获取这些参数?

1. 通过 path 参数传递

最常见的方式,通过在路由路径中定义动态参数,并在路由配置中设置 props: true,将参数作为 props 传递给组件。

路由配置
javascript 复制代码
{
  path: '/:projectId(\\d+)/report/calc/:reportId(\\d+)',
  name: 'CreateCalcPage',
  component: () => import('@/pages/report/calc.vue'),
  props: true, // 通过 props 传递路由参数
}
组件中使用 defineProps
vue 复制代码
<template>
  <div>
    <p>Project ID: {{ projectId }}</p>
    <p>Report ID: {{ reportId }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  projectId: {
    type: String,
    required: true,
  },
  reportId: {
    type: String,
    required: true,
  },
});
</script>

2. 通过 query 参数传递

可以通过 query 参数传递数据。在这种情况下,需要手动从 route 对象中获取参数。

路由跳转
javascript 复制代码
router.push({
  name: 'CreateCalcPage',
  query: {
    projectId: '123',
    reportId: '456',
  },
});
组件中使用 useRoute
vue 复制代码
<template>
  <div>
    <p>Project ID: {{ projectId }}</p>
    <p>Report ID: {{ reportId }}</p>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
const projectId = route.query.projectId;
const reportId = route.query.reportId;
</script>

3. 通过 props 选项传递

可以在路由配置中使用 props 选项来传递静态或动态参数。

静态参数
javascript 复制代码
{
  path: '/report/calc',
  name: 'CreateCalcPage',
  component: () => import('@/pages/report/calc.vue'),
  props: { projectId: '123', reportId: '456' },
}
动态参数
javascript 复制代码
{
  path: '/report/calc',
  name: 'CreateCalcPage',
  component: () => import('@/pages/report/calc.vue'),
  props: route => ({ projectId: route.query.projectId, reportId: route.query.reportId }),
}
组件中使用 defineProps
vue 复制代码
<template>
  <div>
    <p>Project ID: {{ projectId }}</p>
    <p>Report ID: {{ reportId }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  projectId: {
    type: String,
    required: true,
  },
  reportId: {
    type: String,
    required: true,
  },
});
</script>

总结

  • 通过 path 参数传递 :在路由路径中定义动态参数,并使用 props: true 将其作为 props 传递。
  • 通过 query 参数传递 :在路由跳转时通过 query 参数传递数据,并在组件中使用 useRoute 获取。
  • 通过 props 选项传递 :在路由配置中使用 props 选项传递静态或动态参数。
相关推荐
古一|13 分钟前
vue3都有哪些升级相比vue2-核心响应式系统重构
javascript·vue.js·重构
HHHHHY14 分钟前
http接口响应头类型不对,导致svg图片无法预览,前端解决方案
前端·javascript
Komorebi゛23 分钟前
【React】配置别名路径
前端·react.js·前端框架
风语者日志26 分钟前
CTFSHOW WEB 3
前端
普通码农1 小时前
uni.setClipboardData在 iOS 剪贴板复制失败解决方案
前端
_孤傲_1 小时前
webpack实现常用plugin
前端·webpack·node.js
golang学习记1 小时前
从0死磕全栈之Next.js 字体优化实战:零布局偏移、高性能、隐私友好的字体加载方案
前端
zachhere1 小时前
深入了解 OpenAI Apps SDK 的内部机制
前端
张可爱1 小时前
20251015-Vue3八股文整理
前端