通过不同方式在 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 选项传递静态或动态参数。
相关推荐
Jinuss8 分钟前
Vue3源码reactivity响应式篇之computed计算属性
前端·vue3
落日沉溺于海8 分钟前
React From表单使用Formik和yup进行校验
开发语言·前端·javascript
知识分享小能手9 分钟前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
会豪12 分钟前
工业仿真(simulation)--前端(五)--标尺,刻度尺
前端
会豪14 分钟前
工业仿真(simulation)--前端(四)--画布编辑(2)
前端
an__ya__16 分钟前
Vue数据响应式reactive
前端·javascript·vue.js
苦逼的搬砖工19 分钟前
Flutter UI Components:闲来无事,设计整理了这几年来使用的UI组件库
前端·flutter
想买Rolex和Supra的凯美瑞车主20 分钟前
Taro + Vite 开发中 fs.allow 配置问题分析与解决
前端
ruanCat22 分钟前
使用 vite 的 base 命令行参数来解决项目部署在 github page 的路径问题
前端·github
Codebee27 分钟前
使用Qoder 改造前端UI/UE升级改造实践:从传统界面到现代化体验的华丽蜕变
前端·人工智能