Vue Router installation and setup - Deep Dive

Overview - Vue Router installation and setup

What is it?

Vue Router is a tool that helps you make different pages or views in a Vue app. It lets users move between these pages without reloading the whole website. Installing and setting it up means adding this tool to your Vue project and telling it how to handle page changes. This makes your app feel smooth and fast, like a real app on your phone.

Why it matters

Without Vue Router, your Vue app would be stuck on one page or need full reloads to change views, which feels slow and clunky. Vue Router solves this by managing page changes inside the app, improving user experience and making your app behave like a real multi-page app. This is important for building modern websites that feel responsive and easy to use.

Where it fits

Before learning Vue Router setup, you should know basic Vue concepts like components and the Vue CLI. After mastering Vue Router, you can learn advanced routing features like nested routes, route guards, and dynamic routing to build complex apps.

Mental Model

Core Idea

Vue Router acts like a traffic controller that directs users to different pages inside a Vue app without reloading the whole site.

Think of it like...

Imagine a shopping mall with many stores. Vue Router is like the mall directory and signs that guide you smoothly from one store to another without leaving the mall.

┌─────────────┐       ┌─────────────┐       ┌─────────────┐
│   Home      │──────▶│   About     │──────▶│   Contact   │
└─────────────┘       └─────────────┘       └─────────────┘
       ▲                    ▲                    ▲
       │                    │                    │
    User clicks links to move between pages inside the app without full reload.

Build-Up - 7 Steps

1

Foundation

What is Vue Router and why use it

Concept: Introduce Vue Router as the official way to handle page navigation in Vue apps.

Vue Router lets you create multiple pages or views in your Vue app. Instead of loading a new webpage from the server, it changes the view inside the app. This makes your app faster and smoother. You install it as a package and then tell Vue how to use it.

Result

You understand Vue Router's purpose and why it improves user experience in Vue apps.

Understanding Vue Router's role helps you see why single-page apps need special tools to handle navigation.

2

Foundation

Installing Vue Router in a Vue project

Concept: Learn how to add Vue Router to your Vue app using the package manager.

Open your terminal in your Vue project folder. Run: npm install vue-router@4 or yarn add vue-router@4. This adds Vue Router version 4, which works with Vue 3. After installation, you can import Vue Router in your code to start using it.

Result

Vue Router is added to your project and ready to be used.

Knowing how to install packages is a basic but essential skill to add new features to your app.

3

Intermediate

Creating a router instance with routes

🤔Before reading on: do you think routes are defined as components or as strings? Commit to your answer.

Concept: Learn how to define routes that connect URLs to Vue components.

In a new file (e.g., router/index.js), import createRouter and createWebHistory from 'vue-router'. Define an array of route objects, each with a path (URL) and a component to show. Then create the router instance with createRouter({ history: createWebHistory(), routes }). Export this router to use in your app.

Result

You have a router instance that knows which component to show for each URL path.

Understanding that routes map URLs to components is key to controlling what users see when they navigate.

4

Intermediate

Integrating router with Vue app

🤔Before reading on: do you think the router is added inside the main app component or during app creation? Commit to your answer.

Concept: Learn how to connect the router to your Vue app so it controls navigation.

In your main.js or main.ts file, import the router you created. When creating the Vue app with createApp(App), use app.use(router) before mounting. This tells Vue to use the router for navigation. Also, in your App.vue, add where the routed components will appear.

Result

Your Vue app now shows different components based on the URL, controlled by Vue Router.

Knowing where and how to plug the router into your app is essential for it to work properly.

5

Intermediate

Using router-link for navigation

🤔Before reading on: do you think router-link renders as a button or an anchor tag? Commit to your answer.

Concept: Learn how to create clickable links that change pages without reloading.

Instead of regular tags, use Link Text. This component renders as an anchor tag but tells Vue Router to change the view without reloading the page. It keeps the app fast and smooth.

Result

Users can click links to navigate between pages inside the app seamlessly.

Using router-link instead of normal links is crucial to keep navigation inside the Vue app.

6

Advanced

Handling 404 and redirect routes

🤔Before reading on: do you think Vue Router automatically handles unknown URLs or you must define a catch-all route? Commit to your answer.

Concept: Learn how to show a 'not found' page or redirect users when they visit unknown URLs.

Add a route with path: '/:pathMatch(.*)*' to catch all unknown URLs. Set its component to a NotFound.vue page. You can also add redirect routes to send users from one URL to another automatically. This improves user experience by handling mistakes gracefully.

Result

Your app shows a friendly page or redirects when users enter wrong URLs.

Knowing how to handle unknown routes prevents users from seeing blank or broken pages.

7

Expert

Lazy loading routes for performance

🤔Before reading on: do you think all route components load at once or only when needed? Commit to your answer.

Concept: Learn how to load route components only when users visit them to speed up app startup.

Instead of importing components at the top, use dynamic import inside the route definition: component: () => import('./views/About.vue'). This tells Vue Router to load the component only when the route is visited. This reduces initial load time and improves performance.

Result

Your app starts faster because it loads only needed code first, loading other pages on demand.

Understanding lazy loading helps build scalable apps that stay fast even as they grow.

Under the Hood

Vue Router works by watching the browser's URL changes using the History API or hash changes. When the URL changes, it matches the new path to a route definition and renders the associated Vue component inside the . It updates the view without reloading the page by manipulating the virtual DOM. Router-link components prevent default link behavior and trigger Vue Router's navigation methods instead.

Why designed this way?

Vue Router was designed to fit Vue's reactive and component-based model. Using the History API allows clean URLs without hashes, improving user experience and SEO. The design separates route definitions from components, making apps modular and easier to maintain. Alternatives like full page reloads were too slow and clunky, so Vue Router enables single-page app navigation smoothly.

┌───────────────┐
│ Browser URL   │
└──────┬────────┘
       │ URL change
       ▼
┌───────────────┐
│ Vue Router    │
│ (matches URL) │
└──────┬────────┘
       │ renders
       ▼
┌───────────────┐
│ <router-view> │
│ shows component│
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does Vue Router reload the whole page when navigating? Commit to yes or no.

Common Belief: Vue Router reloads the entire webpage when you click a link.

Reality: Vue Router changes the view inside the app without reloading the whole page, making navigation faster.

Why it matters: Thinking it reloads the page leads to confusion about performance and how single-page apps work.

Quick: Do you think router-link is just a styled anchor tag? Commit to yes or no.

Common Belief: router-link is just a normal anchor tag with styling.

Reality: router-link is a Vue component that intercepts clicks to prevent full page reloads and triggers Vue Router navigation.

Why it matters: Using normal anchor tags breaks the single-page app behavior and causes full reloads.

Quick: Does Vue Router automatically handle unknown URLs? Commit to yes or no.

Common Belief: Vue Router automatically shows a 404 page for unknown URLs without extra setup.

Reality: You must define a catch-all route to handle unknown URLs; otherwise, the app may show a blank page.

Why it matters: Missing this leads to poor user experience when users visit wrong URLs.

Quick: Are all route components loaded at app start by default? Commit to yes or no.

Common Belief: All route components load when the app starts, even if users don't visit those pages.

Reality: By default, components are imported eagerly, but you can use lazy loading to load them only when needed.

Why it matters: Not using lazy loading can make your app slower to start, especially with many routes.

Expert Zone

1

Vue Router's navigation guards run before and after route changes, allowing control over access and side effects.

2

Route params and query strings are reactive, so components update automatically when these change without remounting.

3

Vue Router supports multiple history modes (HTML5 history, hash, abstract) to fit different environments like web or native apps.

When NOT to use

Vue Router is not suitable for multi-page apps where each page is a separate HTML file. For static sites or server-rendered apps without client-side navigation, simpler link handling or server routing is better.

Production Patterns

In production, Vue Router is used with lazy loading, route guards for authentication, nested routes for complex layouts, and scroll behavior control to improve user experience.

Connections

Single Page Applications (SPA)

Vue Router is a core part of building SPAs by managing navigation without full page reloads.

Understanding Vue Router helps grasp how SPAs deliver fast, app-like experiences on the web.

Browser History API

Vue Router uses the History API to change URLs without reloading pages.

Knowing how the History API works clarifies how Vue Router keeps URLs in sync with views.

State Machines (Computer Science)

Routing can be seen as a state machine where each URL is a state and navigation triggers transitions.

Viewing routing as state transitions helps design predictable navigation flows and handle edge cases.

Common Pitfalls

#1 Using normal anchor tags for navigation inside the Vue app.

Wrong approach: About

Correct approach:

About

Root cause:

Not knowing that normal links cause full page reloads, breaking single-page app behavior.

#2 Not adding in the main app component.

Wrong approach:

No tag in App.vue, so routed components never show.

Correct approach:

inside App.vue template

Root cause:

Missing the placeholder where Vue Router renders matched components.

#3 Forgetting to use app.use(router) when creating the Vue app.

Wrong approach:

const app = createApp(App); app.mount('#app'); // no router used

Correct approach:

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

Root cause:

Not connecting the router instance to the Vue app, so routing does not work.

Key Takeaways

Vue Router enables smooth page navigation inside Vue apps without full reloads, improving user experience.

Installing Vue Router involves adding the package, creating routes, and connecting the router to your Vue app.

Routes map URL paths to Vue components, and is where these components appear in your app.

Use instead of normal links to keep navigation inside the app and avoid page reloads.

Advanced setup includes handling unknown routes and lazy loading components to optimize performance.

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