Nested Child Routes In A Vue. JS Web Application

When creating a good user interface for a web application, you'll want to reuse as many features as feasible. By assigning child routes to a parent route within the application, it is possible to create a multi-level UI with Vue.JS. This opens the door to new navigational possibilities.
We'll explore how to assign child routes and views to nested routes in a Vue.Js web application.

Create a New Vue.js Project with the Vue CLI

To keep things simple, we'll start by establishing a new Vue.Js project. Execute the following command, assuming you have the Vue CLI installed:

vue create nested-project

Respond to the questions posed by the CLI. It makes no difference whether you use a standalone or a runtime-only project. What matters is that the vue-router library is installed.
To finish up, run the following commands after you've established the project scaffold:

cd nested-project
npm install

We can now start working on our parent and child routes in preparation for some cool UI functionality.

Adding Components to Represent Parent and Child Routes

You should have a src/components/HelloWorld.vue file in a new CLI-generated project. We can leave it as is, but it will be easier to grasp if we rename it to src/components/page1.vue to retain the flow of this example. Our parent view will be represented by this component.
Include the following in the src/components/page1.vue file of the project:

<template>
    <div class="page1">
        <h1>{{ msg }}</h1>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: 'Page1',
        data () {
            return {
                msg: 'Welcome to Your Vue.js App'
            }
        }
    }
</script>

<style scoped>
    h1, h2 {
        font-weight: normal;
    }

    a {
        color: #42b983;
    }
</style>

When we scaffold the project, we get something similar to the code above. However, you'll see that we've put tags in the block. These tags function as a pass-through for any routes we create. These tags will be passed over to our child view.
You'll notice tags in the project's src/App.vue file if you open it. These tags in the src/App.vue file are used by the parent routes.
It's vital to remember that tags can't be used at the root level of the block. To put it another way, this will not work:

<template>
    <router-view></router-view>
</template>

Instead, the tags must be inside a

<div>

element or anything similar.
With the parent view out of the way, let’s pivots on the very likewise child view that we plan on nesting. Create a src/components/child1.vue file within the project and include the following code:

<template>
    <div class="child1">
        <p>{{ footnote }}</p>
    </div>
</template>

<script>
    export default {
        name: 'Child1',
        data () {
            return {
                footnote: 'Created by The Developer'
            }
        }
    }
</script>

<style scoped></style>

With the above code it will just a display a line of text. The mission is to have it display alongside whatever the previous parent view is displaying.
With the two components out of the way, let’s focus on wiring the routes jointly with the vue-router library.

Designing the Vue.Js Router

All routes for this particular example will be found in the project’s src/router/index.js file. If you open it, you’ll see it is still referencing the HelloWorld.vue file that we had previously renamed. We’re just going to change up the entire file.
Within the project’s src/router/index.js file, include the following:

import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/components/page1'
import Child1 from '@/components/child1'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: "/",
            redirect: {
                name: "Child1"
            }
        },
        {
            path: '/page1',
            name: 'Page1',
            component: Page1,
            children: [
                {
                    path: "child1",
                    name: "Child1",
                    component: Child1
                }
            ]
        }
    ]
})

If you run the project, you’ll notice that when you navigate to the root of the application, you’ll be redirected to http://localhost:8080/#/page1/child1 and both the parent and nested child view data will be rendered to the screen.
Awesome right?
This isn’t the only way to accomplish rendering child routes. For example, a default child route could be configured to prevent having to directly navigate to the child path.
Take note of the following changes to the src/router/index.js file:

import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '@/components/page1'
import Page2 from '@/components/page2'
import Child1 from '@/components/child1'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: "/",
            redirect: {
                name: "Child1"
            }
        },
        {
            path: '/page1',
            component: Page1,
            children: [
                {
                    path: "",
                    name: "Child1",
                    component: Child1
                }
            ]
        }
    ]
})

In the above code we’ve removed the name on the parent route and blanked out the child path attribute. Now, when navigating to the http://localhost:8080/#/page1 path, the child is rendered. The need to navigate directly to its path is removed.

Conclusion

You just imagined how to include nested child routes in your Vue.js web application. Having nested children are useful when it comes to templating, between other things. For example, imagine having a settings section of your application where there are multiple settings categories. The settings section could be one of many parent routes while each category could be a child to that parent.😅