Pages and file-based routing in Vue - Step-by-Step Execution

Concept Flow - Pages and file-based routing

Start: App loads

↓

Router reads URL

↓

Look for matching file in /pages

↓

File found

↓

Load component

↓

Render page component

↓

User navigates -> Router updates URL -> Repeat

The router reads the URL, finds the matching page file, loads its component, and renders it. If no file matches, it shows a 404 page.

Execution Sample

Vue

pages/
  index.vue
  about.vue

// URL: /about
// Router loads about.vue component and renders it

This code shows how the router picks the about.vue file to render the About page when the URL is /about.

Execution Table

Step	URL	Router Action	File Matched	Component Loaded	Rendered Output
1	/	Reads URL '/'	index.vue	Index component	Home page content
2	/about	Reads URL '/about'	about.vue	About component	About page content
3	/contact	Reads URL '/contact'	No matching file	404 component	404 Not Found page
4	User clicks link to '/'	Reads URL '/'	index.vue	Index component	Home page content

💡 Routing stops when a matching page file is found or 404 page is shown if no match.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
currentURL	''	'/'	'/about'	'/contact'	'/'
matchedFile	null	index.vue	about.vue	null	index.vue
loadedComponent	null	Index	About	404	Index
renderedPage	null	Home page	About page	404 page	Home page

Key Moments - 2 Insights

Why does the router show a 404 page when the URL does not match any file?

Because the router looks for a file matching the URL in the /pages folder. If it finds none, it loads the 404 component as shown in step 3 of the execution_table.

How does the router know which component to load for a URL?

It matches the URL path to a file name in the /pages folder. For example, '/about' matches about.vue, so it loads the About component as in step 2.

Visual Quiz - 3 Questions

Look at the execution_table. What component is loaded when the URL is '/'?

A 404 component

B About component

C Index component

D Contact component

💡 Hint

Check the 'Component Loaded' column for Step 1 where URL is '/'.

At which step does the router show the 404 page?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the 'Rendered Output' column to find when '404 Not Found page' appears.

If a new file 'contact.vue' is added to /pages, what will happen at Step 3?

A Router will still show 404 page

B Router will load Contact component

C Router will load About component

D Router will load Index component

💡 Hint

Refer to how the router matches URL to file names in the execution_table steps.

Concept Snapshot

Pages and file-based routing in Vue:
- URL path matches a file in /pages folder
- Matching file's component loads and renders
- No match shows 404 page
- Navigation updates URL and repeats routing
- Simple, automatic page management

Full Transcript

When the app starts, the router reads the current URL. It looks for a file in the /pages folder that matches the URL path. If it finds a matching file, it loads that file's component and renders it as the page. If no file matches, the router loads a 404 Not Found page. When the user clicks links, the URL changes and the router repeats this process to load the correct page component. This system makes routing simple by using the file names as routes automatically.

Practice

1. In Vue file-based routing, what does a file named about.vue inside the pages folder represent?

easy

A. A route accessible at /about

B. A nested route under /pages

C. A dynamic route capturing a parameter

D. A global component, not a route

Solution

1. Step 1: Understand file-based routing basics

   Files inside the pages folder automatically become routes matching their file names.

2. Step 2: Map file name to route path

   The file about.vue creates a route at /about directly.

3. Final Answer:

   A route accessible at /about -> Option A

4. Quick Check:

   File name = route path [OK]

Hint: File name equals route path without extension [OK]

Common Mistakes:

• Thinking files create nested routes automatically
• Confusing dynamic routes with static file names
• Assuming files are just components, not routes

2. Which of the following is the correct way to define a dynamic route for a user profile page capturing userId in Vue file-based routing?

easy

A. pages/user/[userId].vue

B. pages/user/:userId.vue

C. pages/user/_userId.vue

D. pages/user/userId.vue

Solution

1. Step 1: Recall dynamic route syntax

   Vue file-based routing uses square brackets to define dynamic segments in file names.

2. Step 2: Match syntax to options

   The correct syntax is [userId].vue inside the folder representing the route.

3. Final Answer:

   pages/user/[userId].vue -> Option A

4. Quick Check:

   Dynamic route uses [param] syntax [OK]

Hint: Use square brackets for dynamic route params [OK]

Common Mistakes:

• Using colon syntax like in Vue Router config
• Using underscore prefix which is invalid here
• Naming file literally as param name without brackets

3. Given the following folder structure inside pages:

pages/
  blog/
    [slug].vue
  index.vue

What URL path will render the component in blog/[slug].vue when visiting /blog/vue-routing?

medium

A. The component renders but slug is undefined

B. The component receives slug = 'vue-routing' as a route param

C. The URL /blog/vue-routing does not match any route

D. The component renders but with slug = 'blog/vue-routing'

Solution

1. Step 1: Identify dynamic route usage

   The file [slug].vue inside blog folder captures the segment after /blog/ as slug.

2. Step 2: Match URL to route param

   Visiting /blog/vue-routing sets slug to 'vue-routing' for the component.

3. Final Answer:

   The component receives slug = 'vue-routing' as a route param -> Option B

4. Quick Check:

   Dynamic segment captures URL part [OK]

Hint: Dynamic file name captures URL segment as param [OK]

Common Mistakes:

• Assuming slug is undefined without explicit props
• Thinking URL must exactly match file name
• Confusing nested folder names with param values

4. You have a file pages/blog/[postId].vue but visiting /blog/123 shows a 404 error. What is the most likely cause?

medium

A. The route parameter is not passed as a prop to the component

B. The file name should be _postId.vue instead of using brackets

C. The pages folder is missing or misnamed

D. The dynamic route file is inside the wrong folder

Solution

1. Step 1: Check folder structure

   For file-based routing to work, the pages folder must exist at the correct location.

2. Step 2: Understand 404 cause

   If pages folder is missing or misnamed, routes won't be generated, causing 404 errors.

3. Final Answer:

   The pages folder is missing or misnamed -> Option C

4. Quick Check:

   Missing pages folder causes no routes [OK]

Hint: Check if pages folder exists and is correctly named [OK]

Common Mistakes:

• Confusing dynamic file syntax with underscore prefix
• Assuming props passing affects route matching
• Placing dynamic file in wrong folder without realizing

5. You want to create nested routes for a blog with categories and posts, where URLs look like /blog/tech/vue-routing. Which folder and file structure inside pages correctly sets this up?

hard

A. pages/blog/category/post.vue

B. pages/blog/[category-post].vue

C. pages/blog/[category]/post.vue

D. pages/blog/[category]/[post].vue

Solution

1. Step 1: Understand nested dynamic routes

   Nested folders represent URL segments; dynamic segments use square brackets for variables.

2. Step 2: Match URL pattern to folder structure

   The URL /blog/tech/vue-routing has two dynamic parts after /blog: category and post.

3. Step 3: Verify correct file path

   Using pages/blog/[category]/[post].vue matches the URL segments correctly.

4. Final Answer:

   pages/blog/[category]/[post].vue -> Option D

5. Quick Check:

   Nested folders with [param] files match nested dynamic routes [OK]

Hint: Use nested folders with bracketed files for nested dynamic routes [OK]

Common Mistakes:

• Combining params in one file name incorrectly
• Using static folder names for dynamic segments
• Misplacing files causing route mismatches