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.

Practice

1. What is the main purpose of Vue Router in a Vue application?

easy

A. To manage navigation between different pages or views

B. To style components with CSS

C. To handle data fetching from APIs

D. To compile Vue components into JavaScript

Solution

1. Step 1: Understand Vue Router's role

   Vue Router is designed to help Vue apps navigate between different pages or views smoothly.

2. Step 2: Compare with other options

   Styling, data fetching, and compiling are handled by other tools, not Vue Router.

3. Final Answer:

   To manage navigation between different pages or views -> Option A

4. Quick Check:

   Vue Router = Navigation [OK]

Hint: Vue Router controls page navigation in Vue apps [OK]

Common Mistakes:

• Confusing Vue Router with styling or data fetching tools
• Thinking Vue Router compiles components
• Assuming Vue Router manages state

2. Which of the following is the correct way to install Vue Router in a Vue 3 project using npm?

easy

A. npm install vue-router@3

B. npm install vue-router@4

C. npm install vue-router@2

D. npm install vue-router@5

Solution

1. Step 1: Identify Vue Router version for Vue 3

   Vue 3 uses Vue Router version 4, so you must install vue-router@4.

2. Step 2: Check other versions

   Versions 2 and 3 are for Vue 2 or earlier, and version 5 does not exist yet.

3. Final Answer:

   npm install vue-router@4 -> Option B

4. Quick Check:

   Vue 3 uses Vue Router 4 [OK]

Hint: Vue 3 pairs with vue-router version 4 [OK]

Common Mistakes:

• Installing older Vue Router versions for Vue 3
• Using a non-existent version number
• Forgetting to specify version for compatibility

3. Given this Vue Router setup code, what will be the rendered output when navigating to '/about'?

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

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

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

And in App.vue template:

<router-view />

medium

A. The Home component content is shown

B. An error occurs because routes are missing

C. Nothing is shown because router is not used

D. The About component content is shown

Solution

1. Step 1: Understand route matching

   When the URL is '/about', Vue Router matches the route with path '/about' and renders the About component.

2. Step 2: Check router-view usage

   The <router-view /> in App.vue displays the matched component, so About content appears.

3. Final Answer:

   The About component content is shown -> Option D

4. Quick Check:

   URL '/about' shows About component [OK]

Hint: URL path matches route, router-view shows that component [OK]

Common Mistakes:

• Assuming Home shows for all paths
• Forgetting router-view renders matched component
• Thinking router must be manually mounted in template

4. What is wrong with this Vue Router setup code?

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import Contact from './components/Contact.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/contact', component: Contact }
];

const router = createRouter({
  history: createWebHistory,
  routes
});

export default router;

medium

A. Components Home and Contact are not imported

B. Routes array is empty

C. createWebHistory is missing parentheses when used

D. Router is not created with createRouter function

Solution

1. Step 1: Check createWebHistory usage

   createWebHistory is a function and must be called with parentheses: createWebHistory()

2. Step 2: Verify other parts

   Routes are defined with imported components, router is created correctly.

3. Final Answer:

   createWebHistory is missing parentheses when used -> Option C

4. Quick Check:

   Functions need parentheses to execute [OK]

Hint: Call createWebHistory() with () to avoid errors [OK]

Common Mistakes:

• Forgetting parentheses on createWebHistory
• Believing routes array is empty
• Misnaming createRouter function

5. You want to add a navigation menu with links to Home and About pages using Vue Router. Which template code correctly uses Vue Router components for navigation?

hard

A.
Home
About

B.
Home
About

C.
Home
About

D.
Home
About

Solution

1. Step 1: Use correct attribute for router-link

   The correct attribute to specify the route path is 'to', not 'href'.

2. Step 2: Use correct path format

   Paths must start with '/', so '/about' is correct, while 'about' without slash is incorrect.

3. Final Answer:

   Use <router-link to="/"> and <router-link to="/about"> with router-view -> Option A

4. Quick Check:

   router-link uses 'to' with leading slash paths [OK]

Hint: Use 'to' attribute with leading slash in router-link [OK]

Common Mistakes:

• Using 'href' instead of 'to' in router-link
• Omitting leading slash in paths
• Using plain anchor tags instead of router-link