Pages and file-based routing in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Vue page component named HomePage.

Vue

<template>
  <main>
    <h1>Welcome to the [1]</h1>
  </main>
</template>

<script setup>
// No script needed for this simple page
</script>

Drag options to blanks, or click blank then click option'

AMainPage

BAboutPage

CContactPage

DHomePage

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different page name that does not match the component.

Leaving the placeholder blank.

The page title should match the component name HomePage to keep it clear and consistent.

2fill in blank

medium

Complete the code to define a route path for the About page in Vue Router.

Vue

const routes = [
  {
    path: '[1]',
    component: () => import('@/pages/AboutPage.vue')
  }
];

Drag options to blanks, or click blank then click option'

A/about

B/profile

C/home

D/contact

Attempts:

3 left

💡 Hint

Common Mistakes

Using a path that does not match the page name.

Forgetting the leading slash.

The route path for the About page should be /about to match the page's purpose and URL.

3fill in blank

hard

Fix the error in the Vue Router import statement to correctly import the createRouter function.

Vue

import { [1] } from 'vue-router';

Drag options to blanks, or click blank then click option'

AcreateRoute

BcreateRouter

CrouterCreate

DmakeRouter

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect function names that do not exist in Vue Router.

Typos in the function name.

The correct function to create a router instance in Vue Router is createRouter.

4fill in blank

hard

Fill both blanks to create a dynamic route path and access the route parameter in the component.

Vue

<template>
  <h2>User ID: {{ $route.params.[1] }}</h2>
</template>

<script setup>
const route = useRoute();
const userId = route.params.[2];
</script>

Drag options to blanks, or click blank then click option'

Aid

Buser

Cuid

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the parameter in the template and script.

Using names not defined in the route path.

The dynamic route parameter is usually named id and accessed via route.params.id.

5fill in blank

hard

Fill all three blanks to define a nested route with a child component and a named view.

Vue

const routes = [
  {
    path: '/dashboard',
    component: () => import('@/pages/Dashboard.vue'),
    children: [
      {
        path: '[1]',
        components: {
          default: () => import('@/pages/DashboardMain.vue'),
          [2]: () => import('@/pages/DashboardSidebar.vue')
        },
        name: '[3]'
      }
    ]
  }
];

Drag options to blanks, or click blank then click option'

Amain

Bsidebar

Cdashboard-child

Ddefault

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'default' as a named view key other than the default slot.

Mismatching route names and paths.

The child route path is main, the named view is sidebar, and the route name is dashboard-child.

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