Nested routes and child views in Vue - Deep Dive

Overview - Nested routes and child views

What is it?

Nested routes and child views in Vue allow you to organize your app's pages inside other pages. This means you can have a main page with smaller parts inside it that change depending on the route. It helps build complex layouts where some parts stay the same while others update. This makes your app easier to manage and more user-friendly.

Why it matters

Without nested routes, every page would be separate and repeated, making your app messy and harder to maintain. Nested routes let you reuse layouts and show related content together, improving user experience and developer productivity. Imagine a website where the menu stays visible while the content changes inside; nested routes make this possible.

Where it fits

Before learning nested routes, you should understand basic Vue routing and components. After mastering nested routes, you can explore dynamic routing, route guards, and advanced layout patterns to build full-featured Vue apps.

Mental Model

Core Idea

Nested routes let you build pages inside pages, where child views show content inside parent layouts based on the URL.

Think of it like...

Think of nested routes like a house with rooms inside it. The house is the main page, and each room is a child view that changes depending on which door (route) you enter.

Main Route (House)
├── Child Route 1 (Living Room)
│   └── Child View: Sofa, TV
├── Child Route 2 (Kitchen)
│   └── Child View: Stove, Fridge
└── Child Route 3 (Bedroom)
    └── Child View: Bed, Closet

Build-Up - 7 Steps

1

Foundation

Basic Vue Router Setup

Concept: Learn how to set up Vue Router with simple routes.

Install Vue Router and create a router instance with routes pointing to components. Each route matches a URL path and shows a component when visited. Example: const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ]; const router = createRouter({ history: createWebHistory(), routes });

Result

Visiting '/' shows the Home component, and '/about' shows the About component.

Understanding basic routing is essential before nesting routes, as nested routes build on this foundation.

2

Foundation

Using <router-view> to Display Routes

Concept: Learn how Vue Router uses to show matched components.

In your main App.vue or layout component, place . This is where Vue inserts the component for the current route. Example:

Result

The matched route component appears inside when you navigate.

Knowing that is the placeholder for route content helps you understand where nested views will appear.

3

Intermediate

Defining Nested Routes in Router Config

🤔Before reading on: Do you think nested routes are defined inside the parent route's children array or separately? Commit to your answer.

Concept: Nested routes are declared inside a parent route's children array in the router configuration.

To nest routes, add a children property to a route object. Each child route has its own path and component. Example: const routes = [ { path: '/dashboard', component: DashboardLayout, children: [ { path: '', component: DashboardHome }, { path: 'settings', component: DashboardSettings } ] } ];

Result

Visiting '/dashboard' shows DashboardHome inside DashboardLayout; '/dashboard/settings' shows DashboardSettings inside the same layout.

Understanding that nested routes live inside the parent's children array clarifies how Vue Router matches URLs hierarchically.

4

Intermediate

Using Nested <router-view> for Child Views

🤔Before reading on: Do you think a parent component needs a to show child routes? Commit to your answer.

Concept: Parent components must include a to display their child routes' components.

Inside the parent component (e.g., DashboardLayout.vue), add where child views should appear. Example:

Result

Child route components render inside the parent's area.

Knowing that nests inside parent components explains how Vue shows child views within layouts.

5

Intermediate

Relative vs Absolute Paths in Nested Routes

🤔Before reading on: Do you think child route paths start with '/' or without it? Commit to your answer.

Concept: Child route paths are relative and should NOT start with '/' to nest properly.

In nested routes, child paths are relative to the parent path. Example: children: [ { path: '', component: Home }, // matches '/dashboard' { path: 'settings', component: Settings } // matches '/dashboard/settings' ] If you use '/settings', it becomes an absolute path, breaking nesting.

Result

Correct relative paths keep child routes nested; absolute paths break nesting.

Understanding path relativity prevents routing bugs and ensures nested routes work as intended.

6

Advanced

Named Views in Nested Routes

🤔Before reading on: Can nested routes have multiple areas with different names? Commit to your answer.

Concept: Vue Router supports named views to show multiple child components in different slots.

Define named in the parent: In routes: children: [ { path: '', components: { default: MainContent, sidebar: SidebarMenu } } ]

Result

Multiple child components render simultaneously in different areas of the parent layout.

Knowing named views allows building complex layouts with multiple changing parts.

7

Expert

Lazy Loading Nested Routes for Performance

🤔Before reading on: Do you think nested routes can be lazy loaded independently? Commit to your answer.

Concept: Nested routes can be lazy loaded separately to improve app loading speed by splitting code.

Use dynamic import syntax in route components: children: [ { path: 'settings', component: () => import('./Settings.vue') } ] This loads the child component only when the route is visited.

Result

App loads faster initially; nested child views load on demand.

Understanding lazy loading nested routes helps optimize large apps for better user experience.

Under the Hood

Vue Router matches the URL path from left to right, finding the parent route first, then its children recursively. When a nested route matches, Vue renders the parent component and inserts the child component inside the parent's . This happens through a reactive system that updates the view when the route changes, keeping the app state in sync with the URL.

Why designed this way?

Nested routes were designed to mirror the hierarchical structure of web pages and layouts. This approach allows developers to build reusable layouts and organize routes logically. Alternatives like flat routes with manual layout switching would be more complex and error-prone. Vue Router's nested system simplifies maintenance and improves clarity.

URL Path Matching Flow

┌─────────────┐
│ URL: /dash- │
│ board/set-  │
│ tings      │
└─────┬───────┘
      │
      ▼
┌─────────────┐
│ Match '/dashboard' │
│ Parent Route       │
└─────┬───────┘
      │
      ▼
┌─────────────┐
│ Match 'settings'   │
│ Child Route        │
└─────┬───────┘
      │
      ▼
┌─────────────┐
│ Render Parent │
│ Component    │
│ with <router-view> │
└─────┬───────┘
      │
      ▼
┌─────────────┐
│ Render Child │
│ Component in │
│ <router-view>│
└─────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does a parent route automatically render its child components without ? Commit yes or no.

Common Belief: Many think the parent component shows child routes automatically without extra setup.

Reality: The parent component must include a to display child components; otherwise, child views won't appear.

Why it matters: Without , nested routes seem broken, confusing developers and users.

Quick: Do child route paths start with '/' to nest properly? Commit yes or no.

Common Belief: Some believe child routes should start with '/' like normal routes.

Reality: Child routes must use relative paths without '/' to nest correctly under the parent route.

Why it matters: Using absolute paths breaks nesting and causes unexpected routing behavior.

Quick: Can nested routes only have one child view? Commit yes or no.

Common Belief: People often think nested routes can only render one child component at a time.

Reality: Vue Router supports named views allowing multiple child components to render simultaneously in different slots.

Why it matters: Ignoring named views limits layout flexibility and app design possibilities.

Quick: Does lazy loading nested routes always improve performance? Commit yes or no.

Common Belief: Some assume lazy loading nested routes always makes the app faster.

Reality: Lazy loading helps but adds complexity and can cause delays on first visit to a route if overused.

Why it matters: Misusing lazy loading can hurt user experience with loading delays and harder debugging.

Expert Zone

1

Nested routes can be deeply nested multiple levels, but too many layers can confuse users and complicate state management.

2

Named views can be combined with nested routes to build highly dynamic layouts, but require careful naming and router config to avoid conflicts.

3

Route props can be passed to nested child components via the router, enabling flexible data flow without prop drilling.

When NOT to use

Avoid nested routes when your app's pages are unrelated or have very different layouts; use flat routes with separate layouts instead. For very dynamic content, consider programmatic routing or dynamic components without nesting.

Production Patterns

In real apps, nested routes organize dashboards, user profiles, and admin panels where a main layout stays constant and child views update. Named views handle sidebars and modals. Lazy loading nested routes is common to speed up initial load and reduce bundle size.

Connections

Component Composition

Nested routes build on component composition by embedding child components inside parent layouts.

Understanding component composition helps grasp how nested routes render child views inside parent components.

File System Hierarchy

Nested routes mirror folder structures where parent folders contain subfolders, organizing content hierarchically.

Recognizing this similarity aids in designing route structures that reflect app organization.

Organizational Management

Nested routes are like departments within a company, where each department (parent) has teams (children) working inside it.

Seeing nested routes as organizational units helps understand how complex systems stay manageable by grouping related parts.

Common Pitfalls

#1 Child routes not showing because parent lacks .

Wrong approach:

Correct approach:

Root cause:

Developers forget that is required in parent components to render nested child routes.

#2 Using absolute paths in child routes breaking nesting.

Wrong approach:

children: [
{ path: '/settings', component: Settings }
]

Correct approach:

children: [
{ path: 'settings', component: Settings }
]

Root cause:

Misunderstanding that child route paths must be relative to the parent route.

#3 Trying to lazy load parent and child routes incorrectly causing errors.

Wrong approach:

component: () => import('./Dashboard.vue'),
children: [
{ path: 'settings', component: Settings } // not lazy loaded
]

Correct approach:

component: () => import('./Dashboard.vue'),
children: [
{ path: 'settings', component: () => import('./Settings.vue') }
]

Root cause:

Not applying lazy loading consistently to nested routes can cause unexpected loading behavior.

Key Takeaways

Nested routes let you build pages inside pages, showing child views inside parent layouts based on the URL.

Parent components must include to display their nested child routes.

Child route paths are relative and should not start with '/' to nest properly.

Named views allow multiple child components to render in different areas of a parent layout.

Lazy loading nested routes improves performance but requires careful use to avoid delays and complexity.