How to Create Nested Routes in Vue: Simple Guide

To create nested routes in Vue, use the children property inside a route object in your Vue Router configuration. Each child route defines a nested path and component that renders inside the parent route's <router-view>.

Syntax

Nested routes are defined by adding a children array inside a route object. Each child route has its own path and component. The parent component must include a <router-view> where the child components will render.

• path: URL segment for the route
• component: Vue component to display
• children: array of nested route objects

javascript

const routes = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent
      }
    ]
  }
];

Example

This example shows a parent route /dashboard with two nested child routes stats and settings. The parent component renders a navigation menu and a <router-view> where the child components appear based on the URL.

javascript

import { createRouter, createWebHistory } from 'vue-router';
import Dashboard from './components/Dashboard.vue';
import Stats from './components/Stats.vue';
import Settings from './components/Settings.vue';

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      {
        path: 'stats',
        component: Stats
      },
      {
        path: 'settings',
        component: Settings
      }
    ]
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

// Dashboard.vue
<template>
  <div>
    <h1>Dashboard</h1>
    <nav>
      <router-link to="/dashboard/stats">Stats</router-link> |
      <router-link to="/dashboard/settings">Settings</router-link>
    </nav>
    <router-view />
  </div>
</template>

Output

<h1>Dashboard</h1>
<nav>
  Stats | Settings
</nav>
<!-- Child component content appears here based on URL -->

Common Pitfalls

Common mistakes when creating nested routes include:

• Not including <router-view> in the parent component, so child routes never render.
• Using a leading slash / in child paths, which makes them absolute instead of nested.
• Forgetting to import or register components properly.

javascript

/* Wrong: child path starts with slash, making it absolute */
const routesWrong = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      { path: '/child', component: ChildComponent } // This is NOT nested
    ]
  }
];

/* Right: child path without leading slash for nesting */
const routesRight = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      { path: 'child', component: ChildComponent } // Nested correctly
    ]
  }
];

Quick Reference

Tips for nested routes in Vue:

• Child paths are relative, no leading slash.
• Parent component must have <router-view> for children.
• Use router-link with full nested paths.
• Nested routes help organize complex UIs with sub-views.

Key Takeaways

Define nested routes using the children array inside a parent route object.

Child route paths should be relative without a leading slash to nest properly.

Always include in the parent component to render child components.

Use router-link with full nested paths to navigate between nested routes.

Nested routes help build organized and scalable Vue applications with sub-views.