How do I create dynamic routes in Vue 3 Router?

How do I create dynamic routes in Vue 3 Router?

To create dynamic routes in Vue 3 Router, you can use route parameters. Here's a basic example...

Can you show me a code snippet for that?

Sure! Here's a simple code snippet:

const routes = [
  { path: '/user/:id', component: User },
];

This will allow you to access the user ID in your component.

What if I want to pass multiple parameters?

You can define multiple parameters in the path like this:

const routes = [
  { path: '/user/:id/profile/:profileId', component: UserProfile },
];

This way, both id and profileId will be available in your component.

How do I access these parameters in the component?

You can access route parameters using this.$route.params in your component. For example:

mounted() {
  const userId = this.$route.params.id;
  const profileId = this.$route.params.profileId;
}