通过不同方式在 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 选项传递静态或动态参数。
相关推荐
爱看书的小沐1 分钟前
【小沐学Web3D】three.js 加载三维模型(Angular)
前端·javascript·vue·webgl·three.js·angular.js·opengl
VillanelleS1 分钟前
前端工程化之模块化开发 & webpack
前端·webpack·node.js
CCChaya-软件技术教师36 分钟前
21-盒子定位(CSS3)
前端·css·css3
陈随易1 小时前
对不起,我还是不推荐你用express和koa
前端·后端·程序员
独立开阀者_FwtCoder1 小时前
基于 MCP Http SSE模式的天气助手智能体开发实战(一文带你了解MCP两种开发模式)
前端·javascript·后端
前端大卫1 小时前
超简单!3 步搭建免费个人 Blog!【附源码】
vue.js·vitepress·前端工程化
月亮慢慢圆1 小时前
表格单元行合并方法
前端
方阿森1 小时前
MasterGo + MCP,借助 AI 实现设计稿转代码
前端·ai编程·mcp
逆袭的小黄鸭1 小时前
一文读懂 JavaScript 的各类继承方式
前端·javascript·面试
谎言西西里1 小时前
深入浅出 Pinia:革新 Vue 状态管理的利器 ⚡
前端