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.

Practice

1. What is the main purpose of nested routes in Vue Router?

easy

A. To load multiple Vue apps on the same page

B. To display child views inside a parent view using <router-view />

C. To create routes without components

D. To disable navigation guards

Solution

1. Step 1: Understand nested routes concept

   Nested routes allow smaller views (child views) to be shown inside bigger views (parent views).

2. Step 2: Identify how child views are displayed

   Child views appear inside the parent component where <router-view /> is placed.

3. Final Answer:

   To display child views inside a parent view using <router-view /> -> Option B

4. Quick Check:

   Nested routes = child views inside parent with <router-view /> [OK]

Hint: Nested routes show child views inside parents with [OK]

Common Mistakes:

• Thinking nested routes load separate apps
• Believing nested routes don't need
• Confusing nested routes with route guards

2. Which of the following is the correct way to define a child route inside a parent route in Vue Router?

easy

A. { path: '/parent', component: Parent, children: [{ path: 'child', component: Child }] }

B. { path: '/parent/child', component: Child }

C. { path: '/parent', component: Parent, child: [{ path: 'child', component: Child }] }

D. { path: '/parent', component: Parent, children: { path: 'child', component: Child } }

Solution

1. Step 1: Recall Vue Router child route syntax

   Child routes go inside a children array property of the parent route object.

2. Step 2: Check each option's structure

   { path: '/parent', component: Parent, children: [{ path: 'child', component: Child }] } correctly uses children: [{ path: 'child', component: Child }]. Options C and D use wrong keys or types. { path: '/parent/child', component: Child } defines a separate route, not nested.

3. Final Answer:

   { path: '/parent', component: Parent, children: [{ path: 'child', component: Child }] } -> Option A

4. Quick Check:

   Child routes = inside children array [OK]

Hint: Child routes go inside a children array in parent route [OK]

Common Mistakes:

• Using 'child' instead of 'children' key
• Defining child routes outside parent route
• Using object instead of array for children

3. Given this route config and components, what will be rendered when navigating to /dashboard/settings?

const routes = [
  { path: '/dashboard', component: Dashboard, children: [
    { path: 'settings', component: Settings }
  ]}
];

// Dashboard.vue template:
// 
Dashboard

// Settings.vue template:
// 
Settings Page

medium

A. Nothing renders due to missing

B. Settings Page

C. DashboardSettings Page

D. Dashboard

Solution

1. Step 1: Understand nested route rendering

   When visiting '/dashboard/settings', Vue renders Dashboard component first, then inside its <router-view /> renders Settings component.

2. Step 2: Combine rendered HTML from both components

   Dashboard shows <h1>Dashboard</h1> and Settings shows <h2>Settings Page</h2>. Both appear together.

3. Final Answer:

   <h1>Dashboard</h1><h2>Settings Page</h2> -> Option C

4. Quick Check:

   Nested route renders parent + child views [OK]

Hint: Nested routes render parent plus child inside [OK]

Common Mistakes:

• Expecting only child component to render
• Forgetting in parent
• Confusing full path with child path

4. What is wrong with this route configuration if child views do not appear?

const routes = [
  { path: '/profile', component: Profile, children: [
    { path: 'edit', component: EditProfile }
  ]}
];

// Profile.vue template:
// 
Profile Page

medium

A. Profile.vue is missing to display child routes

B. Child route path should start with '/'

C. Children array should be outside the parent route object

D. EditProfile component must be imported inside Profile.vue

Solution

1. Step 1: Check how child routes display

   Child routes render inside the parent's <router-view />. Without it, child views won't show.

2. Step 2: Inspect Profile.vue template

   Profile.vue only has <h1>Profile Page</h1> and no <router-view />, so child routes can't render.

3. Final Answer:

   Profile.vue is missing <router-view /> to display child routes -> Option A

4. Quick Check:

   Missing <router-view /> = no child views [OK]

Hint: Parent needs to show child routes [OK]

Common Mistakes:

• Adding '/' at start of child path incorrectly
• Placing children outside parent route object
• Assuming child component imports affect rendering

5. You want to create a nested route where /shop shows a Shop component and /shop/products shows a Products component inside Shop. Which setup correctly achieves this and ensures accessibility and responsiveness? A) Define routes with children array, use <router-view /> in Shop, and add ARIA roles and responsive CSS. B) Define separate routes for /shop and /shop/products without nesting, and use CSS media queries only. C) Use nested routes but omit <router-view /> in Shop and rely on v-if to show Products. D) Use nested routes with children but place <router-view /> outside Shop component.

hard

A. Use nested routes but place outside Shop component

B. Define separate routes without nesting and use only CSS media queries

C. Use nested routes but omit in Shop and use v-if for Products

D. Define routes with children array, use in Shop, add ARIA roles and responsive CSS

Solution

1. Step 1: Setup nested routes properly

   Use a children array in the /shop route to define /shop/products as a child route.

2. Step 2: Ensure Shop component includes <router-view />

   This allows Products component to render inside Shop when navigating to /shop/products.

3. Step 3: Add accessibility and responsiveness

   Use ARIA roles for landmarks and semantic HTML, plus responsive CSS (like Flexbox or Grid) to adapt layout on different screens.

4. Final Answer:

   Define routes with children array, use <router-view /> in Shop, add ARIA roles and responsive CSS -> Option D

5. Quick Check:

   Nested routes + router-view + accessibility + responsive CSS = Define routes with children array, use in Shop, add ARIA roles and responsive CSS [OK]

Hint: Nested routes need router-view in parent plus ARIA and responsive CSS [OK]

Common Mistakes:

• Omitting router-view in parent component
• Not adding ARIA roles for accessibility
• Ignoring responsive design in CSS
• Placing router-view outside parent component