Creating dynamic routes

Now, with our page views created, we need to create our routes and make them accept parameters, transforming them into dynamic routes. In the following steps, we will create the dynamic routes of the application:

1. Open index.js in the src/router folder.
2. First, we need to import the four new pages – List, View, Edit, Create, and Update:

import List from '@/views/List.vue';
import View from '@/views/View.vue';
import Edit from '@/views/Edit.vue';
import Create from '@/views/Create.vue';

3. On the routes array, we will add a new route object for each one of the pages that were imported. In this object, there will be three properties: name, path, and component.
4. For the list route, we will define name as 'list', path as '/', and component as the imported List component:

{
  path: '/',
  name: 'list',
  component: List,
},

5. On the view route, we will define name as 'view', path...