通过不同方式在 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 选项传递静态或动态参数。
相关推荐
先树立一个小目标6 分钟前
puppeteer生成PDF实践
前端·javascript·pdf
冲刺逆向8 分钟前
【js逆向案例二】瑞数6 深圳大学某医院
前端·javascript·vue.js
啃火龙果的兔子9 分钟前
Promise.all和Promise.race的区别
前端
马达加斯加D12 分钟前
Web身份认证 --- OAuth授权机制
前端
2401_8370885012 分钟前
Error:Failed to load resource: the server responded with a status of 401 ()
开发语言·前端·javascript
全栈师13 分钟前
LigerUI下frm与grid的交互
java·前端·数据库
叫我詹躲躲13 分钟前
被前端存储坑到崩溃?IndexedDB 高效用法帮你少走 90% 弯路
前端·indexeddb
无尽夏_14 分钟前
CSS3(前端基础)
前端·css·1024程序员节
温宇飞15 分钟前
Next.js 简述 - React 全栈框架
前端
百花~20 分钟前
前端三剑客之一 CSS~
前端·css