栽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传递路由参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3单文件组件中style特性的深入讲解
单文件就是把一个页面拆分为多个,多层次的组件,通过多层引用,大大缩小vue文件的长度和页面复杂度,下面这篇文章主要给大家介绍了关于vue3单文件组件中style特性的相关资料,需要的朋友可以参考下
2021-09-09
vue+阿里的G2图表-antv+折线图实例
这篇文章主要介绍了vue+阿里的G2图表-antv+折线图实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
VUE响应式原理的实现详解
这篇文章主要为大家详细介绍了VUE响应式原理的实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
关于axios配置请求头content-type实例详解
现在前端开发中需要通过Ajax发送请求获取后端数据是很普遍的一件事情了,下面这篇文章主要介绍了关于axios配置请求头content-type的相关资料,需要的朋友可以参考下
2022-04-04
vue中uni-app 实现小程序登录注册功能
这篇文章主要介绍了uni-app 实现小程序登录注册功能,文中给大家介绍了实现思路，以及vuex和本地缓存的区别，需要的朋友可以参考下
2019-10-10
element-ui 中如何修改loading加载样式
element-ui 中的 loading 加载功能,默认是全屏加载效果,设置局部,需要自定义样式或者修改样式,下面给大家分享实例代码,感兴趣的朋友跟随小编一起看看吧
2024-05-05
使用vue实现HTML页面生成图片的方法
这篇文章主要介绍了使用vue实现HTML页面生成图片的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-03-03
vue移动端UI框架实现QQ侧边菜单组件
这篇文章主要介绍了vue移动端UI框架实现仿qq侧边菜单组件,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2018-03-03
浅谈Vue的基本应用
本文主要介绍了Vue的基本应用。具有一定的参考价值，需要的朋友一起来看下吧
2016-12-12
Vue的三种路由模式总结
这篇文章主要介绍了Vue的三种路由模式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03