Nested routes and child views in Vue - Step-by-Step Execution

Concept Flow - Nested routes and child views

Start at root route

↓

Match parent route

↓

Render parent component

↓

Check for child route

Yes↓

Render child component inside parent

↓

Display combined view

↓

User navigates to another nested route

↓

Repeat child route matching and rendering

The router matches the parent route first, renders its component, then checks for child routes to render inside the parent, showing nested views.

Execution Sample

Vue

const routes = [
  { path: '/parent', component: ParentView, children: [
    { path: 'child', component: ChildView }
  ]}
];

Defines a parent route with a nested child route that renders inside the parent's view.

Execution Table

Step	URL Path	Route Matched	Component Rendered	View Update
1	/parent	Parent route	ParentView	ParentView displayed, child slot empty
2	/parent/child	Parent + Child routes	ParentView + ChildView	ParentView displayed with ChildView inside
3	/parent/child	No further child	No new component	View stable with Parent + Child
4	/parent	Parent route	ParentView	ChildView removed, only ParentView shown

💡 Navigation ends when no more child routes match or user stops navigating.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 4
currentPath	""	"/parent"	"/parent/child"	"/parent"
matchedRoutes	[]	[Parent]	[Parent, Child]	[Parent]
renderedComponents	[]	[ParentView]	[ParentView, ChildView]	[ParentView]

Key Moments - 2 Insights

Why does the child component render inside the parent component?

Because the parent component includes a <router-view> placeholder where the child component is inserted, as shown in execution_table step 2.

What happens if the URL matches only the parent route?

Only the parent component renders without any child, as seen in execution_table step 1 and 4.

Visual Quiz - 3 Questions

Look at the execution table, what components are rendered at step 2?

A ParentView and ChildView

B Only ParentView

C Only ChildView

D No components rendered

💡 Hint

Check the 'Component Rendered' column at step 2 in the execution_table.

At which step does the child component get removed from the view?

A Step 1

B Step 2

C Step 4

D Step 3

💡 Hint

Look at the 'View Update' column where ChildView is removed.

If a new child route is added under the parent, how would the 'matchedRoutes' variable change?

A It would only include the new child route

B It would include Parent and the new child route when matched

C It would only include the Parent route

D It would be empty

💡 Hint

Refer to the 'matchedRoutes' changes in variable_tracker after step 2.

Concept Snapshot

Nested routes let you show child views inside parent views.
Define children in the parent route's children array.
Parent component must have <router-view> to display children.
URL matches parent first, then child routes.
Child components render inside parent's <router-view>.
Navigating changes matched routes and rendered components.

Full Transcript

Nested routes in Vue Router work by matching the parent route first and rendering its component. Then the router checks if the URL matches any child routes defined inside the parent's children array. If a child route matches, its component renders inside the parent's <router-view> placeholder. This creates a nested view structure where the parent stays visible and the child content changes inside it. For example, navigating to '/parent' renders only the ParentView component. Navigating to '/parent/child' renders ParentView with ChildView inside it. If the user goes back to '/parent', the child component is removed. The variables currentPath, matchedRoutes, and renderedComponents track the current URL, which routes matched, and which components are shown. This helps understand how nested routes update the view step-by-step.