Pages and file-based routing in Vue - Mini Project: Build & Apply

Building Pages with File-Based Routing in Vue

📖 Scenario: You are creating a simple website with multiple pages using Vue's file-based routing system. Each page will be a separate Vue component file inside the src/pages folder. The router will automatically create routes based on these files.

🎯 Goal: Build a Vue project with two pages: Home and About. Use file-based routing so that navigating to / shows the Home page and navigating to /about shows the About page.

📋 What You'll Learn

Create Vue component files inside src/pages folder

Use file-based routing to automatically generate routes

Create a Home page component with a heading 'Home Page'

Create an About page component with a heading 'About Page'

Set up the Vue router to use the pages folder for routes

💡 Why This Matters

🌍 Real World

File-based routing is used in many modern Vue projects to simplify route management by automatically generating routes from files.

💼 Career

Understanding file-based routing helps you work efficiently on Vue projects and frameworks like Vite or Nuxt that use this pattern.

1

Create the Home page component

Create a Vue component file called src/pages/Home.vue. Inside it, write a template with a <h1> heading that says Home Page.

Vue

Hint

Use the <template> tag and inside it add <h1>Home Page</h1>.

2

Create the About page component

Create a Vue component file called src/pages/About.vue. Inside it, write a template with a <h1> heading that says About Page.

Vue

Hint

Similar to the Home page, use <template> and add <h1>About Page</h1>.

3

Set up the Vue router to use file-based routing

In your router setup file (e.g., src/router/index.js), import createRouter and createWebHistory from vue-router. Then create a router using createRouter with history set to createWebHistory() and routes set to an empty array. Finally, export the router as default.

Vue

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

// Create router with history and empty routes array

// Export router as default

// Your code here

Hint

Use createRouter with history: createWebHistory() and an empty routes array. Export the router as default.

4

Enable file-based routing with auto-import of pages

Modify the router setup to use file-based routing by importing import.meta.glob to automatically load all Vue files from src/pages. Use Object.entries on import.meta.glob('../pages/*.vue') to create routes where the path is the filename converted to lowercase and prefixed with a slash (use '/' for Home.vue). Assign these routes to the routes array in the router. Export the router as default.

Vue

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

// Use import.meta.glob to load all pages
// Create routes array from pages
// Create router with history and routes
// Export router

// Your code here

Hint

Use import.meta.glob to get all page components, then map them to route objects with paths based on filenames. Use '/' for Home.vue and lowercase names for others.

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