In Vue Router, parameters can be passed through dynamic routing matching and query parameter query; at the same time, routing parameters or query parameters can also be passed as component props, so that components can directly access these parameters through props.
1. Dynamic routing matching
If dynamic routing is used in the routing configuration (such as /user/:id), you can get this parameter.
//Routing configurationconst routes = [
{ path: '/user/:id', component: User }
];
// Get parameters in the component<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
const userId = ;
</script>2. Query parameter query
If there is a query string in the URL (such as /user?id=123) or a query [such as ({path: '/user',query: { id: 123}});] written during the route jump, you can get this parameter.
//Routing configurationconst routes = [
{ path: '/user', component: User }
];
// Get parameters in the component<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
const userId = ;
</script>3. Pass parameters through props
Enable props in the routing configuration and pass params as props.
//Routing configurationconst routes = [
{ path: '/user/:id', component: User, props: true }
];
// Get parameters in the component through props<script setup>
import { defineProps, onMounted } from 'vue';
const props = defineProps({
id: {
type: String,
required: true
}
});
onMounted(() => {
();
});
</script>Pass query parameters through props.
//Routing configurationconst routes = [
{ path: '/user', component: User, props: (route) => ({ id: }) }
];
// Get parameters in the component through props<script setup>
import { defineProps, onMounted } from 'vue';
const props = defineProps({
id: {
type: String,
required: true
}
});
onMounted(() => {
();
});
</script>This is the article about getting the parameters passed by routes in Vue Router (detailed explanation of the method). For more information about Vue Router routing parameters, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!