How do I use route parameters in Vue 3?

How do I use route parameters in Vue 3?

In Vue 3, you can use route parameters by defining them in your route configuration. For example, you can define a route like this: { path: '/user/:id', component: User }. This allows you to access the id parameter in your component.

How can I access the route parameters in my component?

You can access route parameters using the useRoute hook from 'vue-router'. For example:

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const userId = route.params.id;
    return { userId };
  }
};

Can I have multiple route parameters?

Yes, you can have multiple route parameters. For example, you can define a route like this: { path: '/user/:id/post/:postId', component: UserPost }. You can then access both id and postId in your component.

What if I want to make a parameter optional?

You can make a parameter optional by adding a question mark after the parameter name in the route definition. For example: { path: '/user/:id?', component: User }. This way, the id parameter is optional.