Lazy loading routes in Vue - Step-by-Step Execution

Concept Flow - Lazy loading routes

User navigates to route

↓

Check if route component is loaded

↓

Load component asynchronously

↓

Render component

↓

User interacts with page

When a user goes to a route, Vue checks if the component is loaded. If not, it loads it asynchronously, then renders it.

Execution Sample

Vue

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/home', component: () => import('./Home.vue') }
];

const router = createRouter({ history: createWebHistory(), routes });

export default router;

Defines a route that loads the Home component only when the user visits '/home'.

Execution Table

Step	Action	Route Path	Component Loaded?	Result
1	User navigates to '/'	/	No	No component loaded, default page shown
2	User clicks link to '/home'	/home	No	Start loading Home.vue asynchronously
3	Home.vue finishes loading	/home	Yes	Render Home component
4	User navigates again to '/home'	/home	Yes	Render Home component immediately without loading
5	User navigates to unknown route	/unknown	No	Show 404 or fallback page

💡 Execution stops when the component is loaded and rendered or route is unknown.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
currentRoute	/	/home	/home	/home	/home
componentLoaded	false	loading	true	true	true

Key Moments - 3 Insights

Why does the component load only when I visit the route?

Because the component is wrapped in a function that imports it asynchronously, as shown in Step 2 and 3 of the execution table.

What happens if I visit the same route again?

The component is already loaded (Step 4), so Vue renders it immediately without loading again.

What if I visit a route that is not defined?

Vue shows a fallback or 404 page as in Step 5, because no component is loaded for unknown routes.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'componentLoaded' after Step 3?

A "true"

B "false"

C "loading"

D "undefined"

💡 Hint

Check the variable_tracker table column 'After Step 3' for 'componentLoaded'.

At which step does Vue start loading the component asynchronously?

A Step 1

B Step 2

C Step 4

D Step 5

💡 Hint

Look at the 'Action' and 'Result' columns in the execution_table for when loading starts.

If the user visits '/home' twice, what changes in the component loading process?

A The component never loads.

B The component loads twice asynchronously.

C The component loads once and renders immediately the second time.

D The component unloads after first visit.

💡 Hint

Refer to Steps 3 and 4 in the execution_table and variable_tracker for componentLoaded state.

Concept Snapshot

Lazy loading routes in Vue:
- Define routes with components as functions returning import()
- Component loads only when route is visited
- Improves app speed by loading code on demand
- Subsequent visits use cached component
- Unknown routes show fallback page

Full Transcript

Lazy loading routes in Vue means the app waits to load a route's component until the user actually visits that route. When the user clicks a link to a lazy route, Vue starts loading the component asynchronously. Once loaded, Vue renders the component. If the user visits the same route again, Vue uses the already loaded component and renders it immediately. If the user visits a route that does not exist, Vue shows a fallback or 404 page. This approach helps keep the app fast by not loading all components at once.