How can you use the "vue-router" to implement nested routes and nested layouts?

In Vue.js, implementing nested routing and nested layouts using vue-router is a common requirement, especially when building large applications with multi-layered page structures. I will demonstrate this process with a practical example.

Step 1: Installing and Configuring vue-router

First, ensure that vue-router is installed in your Vue project. If not installed, you can install it using npm or yarn:

bash
npm install vue-router

Then, create a router file (typically router/index.js) and set up the basic route configuration:

javascript
import Vue from 'vue';
import Router from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';

Vue.use(Router);

export default new Router({
    routes: [
        { path: '/', component: Home },
        { path: '/about', component: About },
    ]
});

Step 2: Creating Nested Routes

Suppose in the About page, we need additional sub-pages, such as Team and Company. First, add the <router-view> tag to the About.vue component; this tag acts as the mounting point for nested routes.

html
<!-- About.vue -->
<template>
  <div>
    <h1>About</h1>
    <router-view></router-view> <!-- Mounting point for nested routes -->
  </div>
</template>

Next, modify the router/index.js file to add child routes:

javascript
import Team from '../components/Team.vue';
import Company from '../components/Company.vue';

export default new Router({
    routes: [
        { path: '/', component: Home },
        { 
            path: '/about', 
            component: About,
            children: [
                { path: 'team', component: Team },
                { path: 'company', component: Company }
            ]
        },
    ]
});

Step 3: Navigating to Nested Routes

Now, when users navigate to /about/team, the About component loads first, followed by the Team component rendering inside the <router-view> tag within the About component. Similarly, accessing /about/company loads the Company component in the same location.

This approach enables nested page layouts while ensuring the independence and reusability of each component.

Additional Notes

To enhance user experience, add navigation links within the About component to allow easy switching between sub-pages:

html
<template>
  <div>
    <h1>About</h1>
    <ul>
      <li><router-link to="/about/team">Our Team</router-link></li>
      <li><router-link to="/about/company">Our Company</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

This is the fundamental method for implementing nested routing and layouts with vue-router. This structure is particularly suitable for applications requiring multi-layered page compositions, such as corporate websites and management backends.