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.