栽Vue3中传递路由参数的三种方式

更新时间：2024年07月31日 09:39:57 作者：ksuper&

vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,传参方式可划分为 params 传参和 query 传参,本文将给大家介绍如何通过不同方式在 Vue 3 中传递路由参数,需要的朋友可以参考下

1. 通过 path 参数传递

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

路由配置

{
  path: '/:projectId(\\d+)/report/calc/:reportId(\\d+)',
  name: 'CreateCalcPage',
  component: () => import('@/pages/report/calc.vue'),
  props: true, // 通过 props 传递路由参数
}

组件中使用 defineProps

<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 对象中获取参数。

路由跳转

router.push({
  name: 'CreateCalcPage',
  query: {
    projectId: '123',
    reportId: '456',
  },
});

组件中使用 useRoute

<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 选项来传递静态或动态参数。

静态参数

{
  path: '/report/calc',
  name: 'CreateCalcPage',
  component: () => import('@/pages/report/calc.vue'),
  props: { projectId: '123', reportId: '456' },
}

动态参数

{
  path: '/report/calc',
  name: 'CreateCalcPage',
  component: () => import('@/pages/report/calc.vue'),
  props: route => ({ projectId: route.query.projectId, reportId: route.query.reportId }),
}

组件中使用 defineProps

<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 选项传递静态或动态参数。

到此这篇关于栽Vue3中传递路由参数的三种方式的文章就介绍到这了,更多相关Vue3传递路由参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue+iview 实现可编辑表格的示例代码
这篇文章主要介绍了vue+iview 实现可编辑表格的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
vue跳转页面打开新窗口,并携带与接收参数方式
这篇文章主要介绍了vue跳转页面打开新窗口，并携带与接收参数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue-cli项目无法用本机IP访问的解决方法
今天小编就为大家分享一篇vue-cli项目无法用本机IP访问的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
详解vuex commit保存数据技巧
这篇文章主要介绍了详解vuex commit保存数据技巧，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
Vue实现Tab选项卡切换
这篇文章主要为大家详细介绍了Vue实现Tab选项卡切换，点击不同标题显示对应图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
vue页面图片不显示问题解决方案
这篇文章主要介绍了vue页面图片不显示问题解决方案,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-09-09
vue实例成员插值表达式过滤器基础教程示例详解
这篇文章主要为大家介绍了vue实例成员插值表达式过滤器基础教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪
2022-04-04
Vue自定义指令v-focus实例详解
这篇文章主要为大家介绍了Vue自定义指令v-focus实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
vue之邮箱、密码、手机号码等输入验证规则说明
这篇文章主要介绍了vue之邮箱、密码、手机号码等输入验证规则说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue3中proxy的基本用法说明
这篇文章主要介绍了vue3中proxy的基本用法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05