Vue Router installation and setup - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import Vue Router in a Vue 3 project.

Vue

import { createRouter, createWebHistory } from '[1]';

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

Avuex

Bvue

Cvue-router

Dvue-cli

Attempts:

3 left

💡 Hint

Common Mistakes

Importing from 'vue' instead of 'vue-router'.

Using 'vuex' which is for state management, not routing.

Vue Router is imported from the vue-router package.

2fill in blank

medium

Complete the code to create a router instance with history mode.

Vue

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

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

Aroutes

Bmethods

Cstore

Dcomponents

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'components' instead of 'routes'.

Confusing router config with Vue component options.

The router needs a routes array to define the paths.

3fill in blank

hard

Fix the error in the code to register the router in the Vue app.

Vue

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

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

Ause

Bregister

CuseRouter

Dinstall

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to call useRouter which is a hook, not a method on app.

Using register or install which are not Vue app methods.

Use app.use(router) to install the router plugin in the Vue app.

4fill in blank

hard

Fill both blanks to define a simple route for the Home component.

Vue

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

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

A/

BHome

C/home

DApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using '/home' as path for the main page.

Using 'App' instead of 'Home' component.

The root path is '/' and the component is named Home.

5fill in blank

hard

Fill all three blanks to import Vue Router, create the router, and export it.

Vue

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

const router = [2]({ history: [3](), routes: [] });

export default router;

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

AcreateRouter

BcreateWebHistory

CcreateApp

DcreateWebHashHistory

Attempts:

3 left

💡 Hint

Common Mistakes

Using createApp instead of createRouter.

Using createWebHashHistory instead of createWebHistory.

Import createRouter, use it to create the router, and use createWebHistory for history mode.