Nested Routes
Many real interfaces are nested: a settings page might have a persistent sidebar with tabs for Profile, Security, and Notifications, where only the inner content changes as the user switches tabs, while the sidebar and page chrome stay mounted. Vue Router models this with nested routes — a parent route renders a component containing its own <router-view>, and child routes defined in that parent's children array render into that nested outlet.
Cricket analogy: A team's dashboard has a persistent sidebar of tabs — Batting, Bowling, Fielding — where only the inner stats panel changes as a selector switches tabs while the sidebar stays mounted; Vue Router models this as a parent "TeamDashboard" route with a nested <router-view> for each stat tab.
Defining Parent and Child Routes
The parent route's component must itself include a <router-view> for its children to render into; without it, child routes will match but nothing will visually appear. Child paths are relative to the parent (no leading slash) and are automatically prefixed with the parent's path.
Cricket analogy: If a "TeamDashboard" parent component forgets to include its own <router-view>, the "Batting" child route matches but nothing appears — like a scorecard sheet routing to the "bowling figures" page without leaving a slot on the sheet for those numbers to actually print.
const routes = [
{
path: '/settings',
component: SettingsLayout,
children: [
{ path: '', name: 'settings-profile', component: ProfileTab },
{ path: 'security', name: 'settings-security', component: SecurityTab },
{ path: 'notifications', name: 'settings-notifications', component: NotificationsTab },
],
},
]The Layout Component's Router View
SettingsLayout renders the shared chrome (like a sidebar of tabs) plus a nested <router-view> where the active child component appears. An empty-string child path acts as the default child rendered when the parent path is matched exactly, e.g. visiting /settings alone renders ProfileTab.
Cricket analogy: TeamDashboard renders the shared header (team logo, season record) plus a nested <router-view> for the active stat tab; an empty-string child path acts as the default, so visiting /team alone renders the Batting tab automatically, just like walking into a clubhouse and seeing the main scoreboard by default.
<template>
<div class="settings-layout">
<nav>
<router-link :to="{ name: 'settings-profile' }">Profile</router-link>
<router-link :to="{ name: 'settings-security' }">Security</router-link>
<router-link :to="{ name: 'settings-notifications' }">Notifications</router-link>
</nav>
<router-view />
</div>
</template>Nested routes can go arbitrarily deep — a child route can itself have a children array, producing multiple stacked <router-view> outlets. This mirrors how React Router's Outlet component composes nested layouts, though Vue Router's children configuration is declared centrally rather than inline in JSX.
A common mistake is forgetting the <router-view> inside the parent layout component. The child route will match successfully (no console errors, route.matched includes it) but nothing renders, because there's no outlet in the DOM tree for the matched child to be inserted into.
- Nested routes are declared via a children array inside a parent route definition.
- The parent's component must contain its own <router-view> for children to render into.
- Child paths are relative to the parent and combined automatically to form the full URL.
- An empty-string child path acts as the default view for the parent's own exact path.
- Nested routing can be composed to arbitrary depth for multi-level layouts.
- Forgetting the nested <router-view> is a silent failure — the route matches but nothing appears.
Practice what you learned
1. What must a parent route's component include for its child routes to visually render?
2. How are child route paths specified relative to their parent?
3. What does an empty-string path ('') in a children array represent?
4. What symptom indicates a missing nested <router-view> bug?
5. How deep can nested routes be composed in Vue Router?
Was this page helpful?
You May Also Like
Vue Router Basics
Learn how Vue Router maps URLs to components, enabling single-page applications to feel like multi-page sites without full browser reloads.
Dynamic Routes and Route Params
Learn how to define route paths with dynamic segments and read those values reactively inside components using route params.
Navigation Guards
Understand how global, per-route, and in-component navigation guards let you control, cancel, or redirect navigation, e.g. for authentication.
Related Reading
Related Study Notes in Web Development
Browse all study notesWebSockets Study Notes
Web Development · 30 topics
Web DevelopmentWebAssembly Study Notes
WebAssembly · 30 topics
Web DevelopmentgRPC Study Notes
Protocol Buffers · 30 topics
Web DevelopmentSpring Boot Study Notes
Java · 30 topics
Web DevelopmentFlask Study Notes
Python · 30 topics
Web DevelopmentDjango Study Notes
Python · 30 topics