Passing Props to Route Components

// components/UserProfile.vue
<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  id: {
    type: [String, Number],
    required: true,
  },
  name: {
    type: String,
    default: 'Guest',
  },
  isAdmin: {
    type: Boolean,
    default: false,
  },
});
</script>

<template>
  <div style="border: 1px solid #ddd; padding: 15px; margin: 10px;">
    <h2>User Profile: {{ props.name }} (ID: {{ props.id }})</h2>
    <p v-if="props.isAdmin">Administrator Privileges</p>
    <p v-else>Standard User</p>
  </div>
</template>

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import UserProfile from '../components/UserProfile.vue';

const routes = [
  {
    path: '/user/:id',
    name: 'UserProfile',
    component: UserProfile,
    // Option 1: Pass route params as props
    props: true,
  },
  {
    path: '/admin/:id',
    name: 'AdminProfile',
    component: UserProfile,
    // Option 2: Pass an object of props
    props: {
      isAdmin: true,
      name: 'Admin User',
    },
  },
  {
    path: '/guest',
    name: 'GuestProfile',
    component: UserProfile,
    // Option 3: Pass a function that returns props (can combine route params, query, etc.)
    props: (route) => ({
      id: route.query.userId || 'unknown',
      name: route.query.userName || 'Guest Viewer',
      isAdmin: false,
    }),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

// main.js (or wherever you initialize Vue app)
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

// App.vue (Example Navigation)
<template>
  <div>
    <h1>Vue Router Props Example</h1>
    <nav>
      <router-link to="/user/123?name=Alice">User Alice (ID 123)</router-link> |
      <router-link to="/admin/456">Admin User (ID 456)</router-link> |
      <router-link to="/guest?userId=789&userName=Bob">Guest Bob (ID 789)</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>