How can I implement dynamic routing in Vue.js using Vue Router?

How can I implement dynamic routing in Vue.js using Vue Router?

To implement dynamic routing in Vue.js, you can use Vue Router's route parameters. Here's a basic example: you can define a route with a parameter like this:

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

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

How do I access the dynamic parameter in my component?

You can access the dynamic parameter in your component using the $route object. For example:

export default {
  computed: {
    userId() {
      return this.$route.params.id;
    }
  }
};

This will give you the id parameter from the URL.

Can I have multiple dynamic segments in a route?

Yes, you can have multiple dynamic segments in a route. For example:

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

In this case, both :id and :postId are dynamic segments.

What if I want to redirect to a dynamic route?

You can use the redirect option in your route definition. For example:

const routes = [
  { path: '/old-user/:id', redirect: to => {
      return { path: `/user/${to.params.id}` }
    }}
];

This will redirect from /old-user/:id to /user/:id.