Passing Props to Route Components in Vue.js 3
Demonstrating how to pass props to route components in Vue.js 3, enabling the reuse of components with different data for various routes.
// 1. Define your route components
const User = {
template: '<div>User {{ $route.params.id }}</div>',
props: ['id'] // define props
};
// 2. Define the routes with props configuration
const routes = [
{ path: '/user/:id', component: User, props: true }, // pass route.params to props
];
// 3. Create the VueRouter instance and pass the `routes` option
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes
});
// 4. Create and mount the root instance
const app = Vue.createApp({});
app.use(router);
app.mount('#app');
This code sets up a Vue 3 application with Vue Router. It demonstrates how to define route components that accept route parameters as props and configure the router to pass those parameters automatically.
// Vue component using props
const UserProfile = {
template: '<div>User Profile for: {{ username }}</div>',
props: {
username: String
}
};
// Route definitions using function mode to pass props
const routes = [
{
path: '/profile/:username',
component: UserProfile,
// Pass route params as props using a function
props: route => ({ username: route.params.username })
}
];
// VueRouter instance
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes
});
// Vue app initialization
const app = Vue.createApp({});
app.use(router);
app.mount('#app');
This code demonstrates how to use a function mode to pass route params to a component as props, allowing more complex logic for determining what props to pass based on the current route.