Pages and file-based routing in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Vue page component render?

Given a file named src/pages/About.vue in a Vue 3 app using file-based routing, what will the page display when navigating to /about?

Vue

<template>
  <section>
    <h1>About Us</h1>
    <p>Welcome to our site!</p>
  </section>
</template>

<script setup>
// no script needed
</script>

A A blank page with no content

B A page showing 'Home' heading instead

C A page showing a heading 'About Us' and a paragraph 'Welcome to our site!'

D An error because the script section is empty

💡 Hint

Think about how Vue file-based routing maps file names to URLs and renders the template.

In Vue file-based routing, the file About.vue inside pages folder maps to the /about URL. The template content is rendered as the page content.

📝 Syntax

intermediate

Which file name creates a dynamic route for user profiles?

In Vue file-based routing, which file name inside src/pages correctly creates a dynamic route to match URLs like /user/123 where 123 is a user ID?

A user/_id.vue

B user/:id.vue

C user/{id}.vue

D user/[id].vue

💡 Hint

Vue uses square brackets for dynamic route parameters in file names.

In Vue file-based routing, dynamic route parameters are defined by enclosing the parameter name in square brackets, like [id].vue.

🔧 Debug

advanced

Why does this nested route not render the child page?

Given these files: - src/pages/dashboard.vue - src/pages/dashboard/settings.vue Navigating to /dashboard/settings shows a blank page. Why?

A The child file name should be <code>_settings.vue</code> for nested routes

B The parent <code>dashboard.vue</code> lacks a <code>&lt;router-view&gt;</code> to display child routes

C The <code>settings.vue</code> file must be inside a folder named <code>dashboard</code> to work

D Vue file-based routing does not support nested routes

💡 Hint

Think about how nested routes display their children in Vue.

Nested routes require the parent component to include a <router-view> element where child routes render. Without it, child pages won't appear.

❓ state_output

advanced

What is the value of the route param in this page?

In a Vue page component src/pages/blog/[slug].vue, the script setup contains:

import { useRoute } from 'vue-router';
const route = useRoute();
const slug = route.params.slug;

If the user visits /blog/vue-routing, what is the value of slug?

A "vue-routing"

B "_slug"

C undefined

D "blog/vue-routing"

💡 Hint

Route params capture the dynamic part of the URL matching the file name.

The dynamic segment [slug] captures the part of the URL after /blog/. So visiting /blog/vue-routing sets slug to "vue-routing".

🧠 Conceptual

expert

Which option correctly describes the behavior of catch-all routes in Vue file-based routing?

You want to create a catch-all route that matches any path not matched by other routes, for example to show a 404 page. Which file name inside src/pages achieves this?

A [...all].vue

B _all.vue

C [...all].vue with a <code>definePageMeta({ catchAll: true })</code> in script

D euv.]lla...[

💡 Hint

Catch-all routes use a special syntax with three dots inside square brackets.

In Vue file-based routing, catch-all routes are defined by files named with three dots inside square brackets, like [...all].vue. This matches any unmatched path.

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