Nested routes

Many applications are composed of components that consist of several multiple-level nested components. For example, /user/settings/general indicates that a general view is nested in the settings view and this settings view is nested within the user view. It represents the General information section of a user’s settings page.

Most of the time, we want the URL to correspond to such a structure, as demonstrated in the following screenshot:

Figure 7.36 – User with two nested views – Info and Extra

Vue Router makes it easy to achieve this structure using nested route configurations and the RouterView component.

Let’s go back to the User.vue view in our previous example (located in ./src/views/) and add a nested RouterView component in the <template> section:

<div>
  <h1>About a user: {{$route.params.id}}</h1>
  <RouterLink :to="`/user/${$route.params.id}...