Nested Routes

In reality, 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 6.37: User with two nested views – Info and Extra

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

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

<div>
  <h1>About a user: {{$route.params.id}}</h1>
  <router-link :to="{ name: 'userinfo'...