Vue Router installation and setup - Step-by-Step Execution

Concept Flow - Vue Router installation and setup

Start Project Setup

↓

Install Vue Router

↓

Create Router Instance

↓

Define Routes Array

↓

Add Router to Vue App

↓

Mount Vue App with Router

↓

App Ready

This flow shows the steps to add Vue Router: install it, create routes, add router to app, then mount the app.

Execution Sample

Vue

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

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

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

const app = createApp(App)
app.use(router)
app.mount('#app')

This code defines two routes, creates the router, adds it to the Vue app, and mounts the app.

Execution Table

Step	Action	Code Line	Result	Notes
1	Import createRouter and createWebHistory	import { createRouter, createWebHistory } from 'vue-router'	Functions ready to use	Prepare router creation tools
2	Define routes array	const routes = [...]	Routes array with '/' and '/about'	Routes tell router which component to show
3	Create router instance	const router = createRouter({ history: createWebHistory(), routes })	Router object created	Router now knows history mode and routes
4	Create Vue app instance	const app = createApp(App)	Vue app instance created	App ready to use plugins
5	Add router to app	app.use(router)	Router plugin added to app	App can now handle routing
6	Mount app to DOM	app.mount('#app')	App appears on page with routing	App is live and interactive
7	Exit	N/A	Setup complete	Vue app with router is ready

💡 All steps done, Vue Router installed and app mounted successfully

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 5	Final
createRouter	imported function	imported function	imported function	imported function	imported function
createWebHistory	imported function	imported function	imported function	imported function	imported function
routes	undefined	[{path:'/',component:Home},{path:'/about',component:About}]	[{path:'/',component:Home},{path:'/about',component:About}]	[{path:'/',component:Home},{path:'/about',component:About}]	[{path:'/',component:Home},{path:'/about',component:About}]
router	undefined	undefined	router instance	router instance	router instance
app	undefined	undefined	undefined	Vue app instance	Vue app instance

Key Moments - 2 Insights

Why do we need to call app.use(router) before mounting the app?

Calling app.use(router) registers the router plugin with the Vue app so routing works. Without it, the app won't respond to route changes. See execution_table step 5.

What does createWebHistory() do in the router setup?

createWebHistory() sets the router to use browser history mode for clean URLs without hashes. It's passed to createRouter as the history option. See execution_table step 3.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'routes' after step 2?

A router instance

B undefined

C [{path:'/',component:Home},{path:'/about',component:About}]

D Vue app instance

💡 Hint

Check the 'routes' row in variable_tracker after step 2

At which step is the Vue app instance created?

A Step 3

B Step 4

C Step 5

D Step 6

💡 Hint

Look at the 'app' variable in variable_tracker and execution_table actions

If we skip app.use(router), what happens when mounting the app?

A App mounts but routing won't work

B App fails to mount

C Router works without registration

D App shows an error immediately

💡 Hint

Refer to key_moments about app.use(router) importance

Concept Snapshot

Vue Router Setup Quick Steps:
1. Install Vue Router package.
2. Import createRouter and createWebHistory.
3. Define routes array with path and component.
4. Create router with createRouter({ history, routes }).
5. Create Vue app and add router with app.use(router).
6. Mount app with app.mount('#app').

Full Transcript

To set up Vue Router, first install it in your project. Then import createRouter and createWebHistory from 'vue-router'. Define your routes as an array of objects with path and component. Create the router instance by calling createRouter with history set to createWebHistory() and the routes array. Next, create your Vue app instance with createApp. Add the router to the app using app.use(router). Finally, mount the app to a DOM element with app.mount('#app'). This process enables your Vue app to handle navigation between pages smoothly.

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