How to create nested routes in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Creating nested routes in Vue Router enables hierarchical navigation structures with parent-child relationships for complex application architectures. With over 25 years of experience in software development and as the creator of CoreUI, I’ve implemented nested routing extensively in dashboard applications, admin panels, and multi-level navigation systems. From my expertise, the most effective approach is defining child routes in the route configuration and using router-view components for nested content rendering. This pattern provides organized code structure with shared layouts and efficient component reuse across different application sections.
Define child routes in route configuration and use nested router-view components for hierarchical navigation structures.
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Layout from '@/layouts/Layout.vue'
import Dashboard from '@/views/Dashboard.vue'
import Users from '@/views/dashboard/Users.vue'
import UserList from '@/views/dashboard/UserList.vue'
import UserProfile from '@/views/dashboard/UserProfile.vue'
const routes = [
{
path: '/',
component: Layout,
children: [
{ path: '', component: () => import('@/views/Home.vue') },
{ path: 'about', component: () => import('@/views/About.vue') },
{
path: 'dashboard',
component: Dashboard,
children: [
{ path: '', redirect: 'overview' },
{ path: 'overview', component: () => import('@/views/dashboard/Overview.vue') },
{
path: 'users',
component: Users,
children: [
{ path: '', component: UserList },
{ path: ':id', component: UserProfile, props: true }
]
}
]
}
]
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
<!-- Layout.vue -->
<template>
<div class='app-layout'>
<header>Main Navigation</header>
<main>
<router-view />
</main>
</div>
</template>
<!-- Dashboard.vue -->
<template>
<div class='dashboard-layout'>
<nav>
<router-link to='/dashboard'>Overview</router-link>
<router-link to='/dashboard/users'>Users</router-link>
</nav>
<div class='content'>
<router-view />
</div>
</div>
</template>
Here the children array defines nested routes where each child route renders inside the parent’s router-view. Multiple levels of nesting are supported, allowing complex hierarchies. Empty paths ('') match when the parent path is accessed exactly, and redirect provides default child routes for better user experience.
Best Practice Note:
This is the same approach we use in CoreUI Vue applications for building scalable navigation systems with shared layouts and organized route structures. Use nested routes to group related functionality and share common layout components, reducing code duplication and improving application maintainability.
