How do I implement dynamic routes in Vue Router?

How do I implement dynamic routes in Vue Router?

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

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

In this case, :id is a dynamic segment that can match any user ID.

Can you show me how to access the dynamic parameter in the component?

Sure! In your component, you can access the dynamic parameter using this.$route.params.id. For example:

export default {
  mounted() {
    console.log('User ID:', this.$route.params.id);
  }
};

What if I want to have nested dynamic routes?

For nested dynamic routes, you can define child routes with their own dynamic segments. Here's an example:

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