Dynamic Routing

If there is a lot of data that follows the same format, such as a list of users, or a list of messages, and it's required to create a page for each of them, we need to use a routing pattern. With a routing pattern, we can create a new route dynamically from the same component based on some additional information. For example, we want to render the User view component for every user but with different id values. Vue Router provides us with the ability to use dynamic segments denoted by a colon (:) to achieve dynamic routing.

Instead of using params, which doesn't persist its value on refresh or appear in the URL, we define the required params directly in the path as follows:

{
    path: '/user/:id',
    name: 'user',
    component: () => import(/* webpackChunkName: "user" */       '../views/User.vue')
  }

In the preceding code, :id means...