Why routing is needed for SPAs in Vue - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Vue Router library.

Vue

import [1] from 'vue-router';

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

AcreateRouter

BVueRouter

Crouter

DRouter

Attempts:

3 left

💡 Hint

Common Mistakes

Using old Vue Router names from Vue 2 like 'VueRouter'.

The createRouter function is used to create a router instance in Vue 3 for SPA navigation.

2fill in blank

medium

Complete the code to define a route path for the Home component.

Vue

const routes = [{ path: '/', component: [1] }];

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

AHome

BApp

CMain

DRoot

Attempts:

3 left

💡 Hint

Common Mistakes

Using component names that don't match the main page like 'App' or 'Root'.

The route path '/' usually points to the Home component in SPAs.

3fill in blank

hard

Fix the error in the router creation code by completing the blank.

Vue

const router = createRouter({ history: [1](), routes });

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

AcreateWebHashHistory

BcreateMemoryHistory

CcreateHistory

DcreateWebHistory

Attempts:

3 left

💡 Hint

Common Mistakes

Using hash history when clean URLs are expected.

createWebHistory is used for clean URLs without hashes in Vue Router for SPAs.

4fill in blank

hard

Fill both blanks to register the router in the Vue app.

Vue

const app = createApp(App);
app.[1](router);
app.[2]('#app');

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

Ause

Bmount

Cinstall

Drender

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'mount' and 'use' methods.

Use app.use(router) to add routing, then app.mount('#app') to start the app.

5fill in blank

hard

Fill all three blanks to create a navigation link to the About page.

Vue

<router-link to=[1]>[2]</router-link>

const routes = [
  { path: '/', component: Home },
  { path: [3], component: About }
];

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

A"/about"

BAbout

C"/contact"

DContact

Attempts:

3 left

💡 Hint

Common Mistakes

Using mismatched paths or link text for the About page.

The to attribute and route path must match the About page path "/about", and the link text is 'About'.