Creating nested routes

In a nutshell, routes generated from nested components are called nested routes. In some cases, you may want to compose components (child components) that are nested inside other components (parent components), and you will want to render these child components inside particular views of the parent components, instead of having the parent components replaced by the child components.

To do that in a Vue app, you will need to insert a <router-view> component inside the parent component for the child component. For example, say you have a Users parent component and you want the contents of the individual user to be loaded inside this parent when a specific user is called. Then, you can create a nested route for them with the following steps:

1. Create a parent component:

const Users = {
  template: `
    <div class="user">
      <h2>Users</h2>
      <router-link to="/user/1">1</router-link>
      <router-link to...