Vue Router installation and setup - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is Vue Router used for in a Vue.js application?

Vue Router helps you create different pages or views in your Vue app and lets users move between them without reloading the page.

beginner

How do you install Vue Router in a Vue 3 project?

You run npm install vue-router@4 or yarn add vue-router@4 to add Vue Router version 4, which works with Vue 3.

intermediate

What is the purpose of createRouter and createWebHistory in Vue Router setup?

createRouter creates the router instance that controls navigation. createWebHistory tells the router to use browser history mode for clean URLs without hashes.

beginner

Where do you add the router to your Vue app?

You add the router to your app by calling app.use(router) before mounting the app with app.mount('#app').

beginner

What component do you use in your template to display the matched route's component?

You use the <router-view> component in your template. It shows the component for the current route.

Which command installs Vue Router version 4 for Vue 3?

A npm install vue-router@4

B npm install vue-router@3

C npm install vue-router

D npm install vue-router@5

Vue Router version 4 is designed for Vue 3, so you install it with npm install vue-router@4.

What does createWebHistory() do in Vue Router?

A Enables hash-based URLs

B Defines routes

C Enables browser history mode for clean URLs

D Creates a new Vue app

createWebHistory() uses the browser's history API to create clean URLs without hashes.

Where should you place app.use(router) in your Vue app setup?

A After mounting the app

B In the main component's template

C Inside the router file

D Before mounting the app

You must add the router to the app with app.use(router) before calling app.mount().

Which component renders the matched route's component in Vue Router?

A <router-link>

B <router-view>

C <router-route>

D <router-display>

is the placeholder where the current route's component is displayed.

What is the first step after installing Vue Router to set it up?

A Create a router instance with routes

B Add <router-view> in HTML

C Call app.mount()

D Write components

After installing, you create a router instance with your route definitions using createRouter.

Explain the steps to install and set up Vue Router in a new Vue 3 project.

Think about installation, router creation, app integration, and template usage.

Describe the role of and how it works with Vue Router.

Focus on how Vue Router shows different pages inside your app.