Three ways to pass routing parameters in Vue3

How do I pass routing parameters in Vue 3 differently and get them in a component using defineProps or other combined API?

1. Pass through path parameter

The most common way is to pass the parameters as props to the component by defining dynamic parameters in the routing path and setting props: true in the routing configuration.

Routing configuration

{
  path: '/:projectId(\\d+)/report/calc/:reportId(\\d+)',
  name: 'CreateCalcPage',
  component: () =&gt; import('@/pages/report/'),
  props: true, // Pass routing parameters through props}

Use defineProps in components

<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. Pass through query parameter

Can be passedqueryParameters pass data. In this case, it is necessary to manuallyrouteGet parameters in the object.

Routing jump

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

Use useRoute in components

<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 = ;
const reportId = ;
</script>

3. Pass through the props option

Can be used in routing configurationpropsOptions to pass static or dynamic parameters.

Static parameters

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

Dynamic parameters

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

Use defineProps in components

<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>

Summarize

passpathParameter passing: Define dynamic parameters in the routing path and useprops: truePass it as props.
passqueryParameter passing: Passed when the route jumpsqueryParameters pass data and use it in componentsuseRouteGet it.
passpropsOption passing: Used in routing configurationpropsOptions pass static or dynamic parameters.

This is the introduction to this article about the three ways to pass routing parameters in Vue3. For more related content on Vue3, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!