Defining routes in Vue - Step-by-Step Execution

Concept Flow - Defining routes

Start Vue app

↓

Create router instance

↓

Define routes array

↓

Pass routes to router

↓

Mount router to app

↓

User navigates URL

↓

Router matches route

↓

Render matched component

↓

Display page content

This flow shows how Vue Router sets up routes and renders components based on the URL.

Execution Sample

Vue

import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

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

This code defines two routes and creates a router instance with history mode.

Execution Table

Step	Action	Input/State	Output/Result
1	Import router functions	N/A	createRouter and createWebHistory available
2	Define routes array	Empty routes	routes = [{path:'/',component:Home},{path:'/about',component:About}]
3	Create router instance	routes array	router with history and routes configured
4	Mount router to app	router instance	App uses router for navigation
5	User navigates to '/'	URL = '/'	Router matches '/' route
6	Render matched component	Matched route '/'	Home component displayed
7	User navigates to '/about'	URL = '/about'	Router matches '/about' route
8	Render matched component	Matched route '/about'	About component displayed
9	User navigates to '/contact'	URL = '/contact'	No match found, fallback or 404
10	Render fallback	No matched route	Show 404 or redirect
11	End	No more navigation	App stays on current page

💡 Execution stops when user stops navigating or app closes.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
routes	undefined	[{path:'/',component:Home},{path:'/about',component:About}]	[same]	[same]	[same]
router	undefined	undefined	router instance created	router mounted to app	router active
URL	undefined	undefined	undefined	user navigates '/'	changes with navigation

Key Moments - 3 Insights

Why do we need to define routes as an array of objects?

Because Vue Router uses this array to know which URL path matches which component to display, as shown in execution_table rows 2 and 3.

What happens if the user navigates to a URL not defined in routes?

The router finds no match and shows a fallback or 404 page, as seen in execution_table rows 9 and 10.

Why do we use createWebHistory() when creating the router?

It enables clean URLs without hashes, managing browser history properly, as shown in execution_table step 3.

Visual Quiz - 3 Questions

Look at the execution table, what component is displayed when the URL is '/'?

A 404 fallback

B About component

C Home component

D No component

💡 Hint

Check execution_table row 6 where URL '/' matches Home component.

At which step does the router instance get created?

A Step 3

B Step 2

C Step 4

D Step 5

💡 Hint

Look at execution_table step 3 where router instance is created.

If we add a new route for '/contact', what changes in the execution table?

A The router instance creation step changes

B A new row for '/contact' navigation and rendering appears

C The routes array becomes empty

D No changes happen

💡 Hint

Adding a route affects navigation steps, see rows 5-8 for existing routes.

Concept Snapshot

Defining routes in Vue Router:
- Create an array of route objects: { path, component }
- Use createRouter with history and routes
- Mount router to Vue app
- Router matches URL to route
- Displays matched component
- Handles unmatched URLs with fallback

Full Transcript

This visual execution shows how Vue Router defines routes and renders components. First, we import router functions, then define routes as an array with path and component pairs. Next, we create a router instance using createRouter and createWebHistory. The router is mounted to the Vue app. When a user navigates to a URL, the router matches it to a route and renders the corresponding component. If no route matches, a fallback or 404 page is shown. Variables like routes and router instance change as the app initializes and runs. Key moments include understanding the routes array, handling unmatched URLs, and the role of history mode. The quizzes test knowledge of component rendering, router creation step, and adding new routes.