When using vue-router with children's routes, we need to create the main view, which will have a special component called RouterView. This component will render the current router inside the layout or page you are rendering.
Now, in the following steps, we will create the layout for the pages:
- In the src/views folder, we need to create a new folder called user and move the Create, Edit, List, and View pages to this new folder.
- Create a new file called Index.vue in the user folder and open it.
- In the single file component <template> section, add a router-view component:
<template>
<router-view/>
</template>
<script>
export default {
name: 'User',
}
</script>