通过不同方式在 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 选项传递静态或动态参数。
相关推荐
天天扭码15 分钟前
2025年了,npm 与 pnpm我们该如何选择
前端·javascript·npm
烛阴17 分钟前
10个JavaScript编程技巧,助你成为高效开发高手!
前端·javascript
去伪存真17 分钟前
ESLint + Husky 如何只扫描发生改动的文件?
前端·eslint
sen_shan32 分钟前
Vue3+Vite+TypeScript+Element Plus开发-23.客制Form组件
vue.js
s91236010134 分钟前
rust REGEX和lazy_static 和struct 混用
java·前端·javascript
vvilkim1 小时前
React 与 Vue 虚拟 DOM 实现原理深度对比:从理论到实践
前端·vue.js·react.js
天天扭码1 小时前
在项目中常见的main.js和main.mjs有什么区别,我们该如何选择?
前端·javascript·面试
姑苏洛言1 小时前
在开发扫码小程序中,遇到胡坑“require() 默认不支持绝对路径”及其解决方案
前端
Passerby_K1 小时前
vue3+dhtmlx 甘特图真是案例
前端·vue·甘特图
佳腾_1 小时前
【Web应用服务器_Tomcat】二、Tomcat 核心配置与集群搭建
java·前端·中间件·tomcat·web应用服务器