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.