Defining routes in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Vue Router function.

Vue

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

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

AdefineRoute

BuseRouter

CcreateRouter

DrouterCreate

Attempts:

3 left

💡 Hint

Common Mistakes

Using useRouter which is for accessing the router instance, not creating it.

Trying to import a function that doesn't exist like defineRoute.

The createRouter function is used to define routes in Vue Router.

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

BHomePage

Chome

DMain

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase home which is not a valid component name.

Using unrelated names like Main.

The component name Home matches the imported component for the home page.

3fill in blank

hard

Fix the error in the router creation by completing the missing property.

Vue

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

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

Apath

Broutes

Ccomponent

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using path or component which belong inside route objects, not router config.

Omitting the routes property entirely.

The routes property is required to tell the router which routes to use.

4fill in blank

hard

Fill both blanks to define a route with a name and path.

Vue

const routes = [{ name: '[1]', path: '[2]', component: About }];

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

Aabout

B/about

C/home

Dhome

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the name and path values.

Using /home or home for the About route.

The route name is about and the path is /about for the About page.

5fill in blank

hard

Fill both blanks to create a router with history and routes.

Vue

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

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

AcreateWebHashHistory

Broutes

Cstrict

DcreateWebHistory

Attempts:

3 left

💡 Hint

Common Mistakes

Using createWebHashHistory when the question expects createWebHistory.

Omitting the routes property or confusing it with others.

The router uses createWebHistory() for history and routes for route list.