Nested Routes

A route can have child routes. The parent renders a `<router-view />` and child components render inside it — the standard way to share a layout.

4 min read Level 2/5 #vue#router#nested

What you'll learn

Add children to a route
Render a nested `<router-view />` in the parent
Provide a default child via redirect

When several pages share a header, sidebar, or shell, model that as a parent route with children. The shell lives in the parent and the children swap in and out of its <router-view />.

Configure Children

import AppLayout from './layouts/AppLayout.vue'
import Dashboard from './pages/Dashboard.vue'
import Settings from './pages/Settings.vue'

const routes = [
  {
    path: '/app',
    component: AppLayout,
    children: [
      { path: '', redirect: { name: 'dashboard' } },
      { path: 'dashboard', name: 'dashboard', component: Dashboard },
      { path: 'settings', name: 'settings', component: Settings },
    ],
  },
]

Children have paths relative to the parent — /app/dashboard, /app/settings.

The Parent Layout

The parent’s template hosts the shell and a nested <router-view />.

<!-- AppLayout.vue -->
<template>
  <header>App header</header>
  <aside>Sidebar</aside>
  <main>
    <router-view />
  </main>
</template>

Default Child

The empty path child redirects /app → /app/dashboard. Alternatively, use { path: '', component: Dashboard } to make the dashboard the default without a redirect.

Going Deeper

Children can have their own children — nesting is unlimited. Pair it with named views (<router-view name="sidebar" />) if a layout needs to render multiple slots from the route config.

State With Pinia →