Vue 41: Nested Routes
easy⏱ 5 mincoursevue
children + a nested <router-view>
A route can declare children, an array of sub-routes scoped under its own path. The parent component renders its own layout — nav, header, whatever — plus its OWN <router-view>, which is where the matched child renders. That means two <router-view>s nested inside each other.
const routes = [
{
path: '/dashboard',
component: Dashboard,
children: [
{ path: 'overview', component: Overview },
{ path: 'settings', component: Settings },
],
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
Redirecting the parent path
Visiting /dashboard directly wouldn't match any child by default, so the empty child path ('') carries a redirect to /dashboard/overview — a common pattern for giving a section a sensible default tab.
Try it
Add a third child route, e.g. 'billing', with its own component and nav link inside Dashboard's template.