VueJS - Vue Router Child Paths

In a real world example you'll be creating an application that has a few nested URLs for example a user account will have URLs such as

• /account
• /account/security
• /account/notifications
• /account/billing

There are quite a few options for this that can be added to your account pages. This is where nested paths are so handy in Vue Router, as you can structure your site to have child URLs. The best part of Vue child URLs is that they will render the parent object and then the child object at the same time. This makes it perfect to build a page with a sub-navigation on. For example lets try to build the below page.

It starts with an account page, followed by a sub-navigation then a content area for the page, this content area is the component that's going to change when we navigate to the sub-pages. First let's have a look at the HTML for this, all we have is the router-view tag.

<div id="app">
    <h1>Router Child Paths</h1>
    <router-view></router-view>
</div>

First we'll build the components for this child path, we need a Account parent page, account information page, security page, notification page and a billing page. This is the account main page, it will have the sub navigation for the account section and then another router-view tag which is what Vue will replace with the child component.

const AccountMain = {
    template: '<div class="container">' +
    '<h1>Account</h1>' +
    '<ul>' +
        '<li><router-link to="/account">Account</router-link></li>' +
        '<li><router-link to="/account/security">Security</router-link></li>' +
        '<li><router-link to="/account/notifications">Notifications</router-link></li>' +
        '<li><router-link to="/account/billing">Billing</router-link></li>' +
    '</ul>' +
    '<router-view class="child"></router-view>' +
    '</div>'
};

Next we build all the child page for the account section.

const Account = { template: '<div class="content"><p>Account information</p></div>' };
const Security = { template: '<div class="content"><p>Security</p></div>' };
const Notifications = { template: '<div class="content"><p>Notifications</p></div>' };
const Billing = { template: '<div class="content"><p>Billing</p></div>' };

With the components built we can then create the routes for the components. The first route is for /account this is going to use the component AccountMain which is the wrapper for the account information. There is a new children property on the route which allows us to add the child URLs.

const routes = [
    {
        path: '/account',
        component: AccountMain,
        children: [
            { path:'', component: Account },
            { path:'security', component: Security },
            { path:'notifications', component: Notifications },
            { path:'billing', component: Billing },
        ]
    }
];
const router = new VueRouter({ routes: routes });
const app = new Vue({ router }).$mount('#app');

We now have 4 new URLs - /account

• /account/security
• /account/notifications
• /account/billing

These child URLs will replace the router-view component in the AccountMain component. View the demo to see this in action.