What is Vue Router and how to use it

Vue Router is the official routing library for Vue.js. It allows us to define routes in a Vue.js application and associate each route with a specific component.

Vue Router is the fundamental component for creating single-page applications (SPA) where navigation between views happens without reloading the page.

When the user navigates to a specific URL, Vue Router loads the corresponding component, giving the sensation that “the page has changed”.

Installing Vue Router

To start using Vue Router, we first need to install it in our project (logical 😜). If you don’t have it installed, you can easily add it.

Basic Configuration

Once installed, we need to configure Vue Router in our application. This involves touching several files. Let’s see it step by step.

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

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

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

export default router;

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

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

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <RouterView />
</template>

Creating Basic Routes

Routes in Vue Router are defined as an array of objects, where each object represents a route.

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

Navigating Between Routes

To navigate between pages in a Vue.js application with Vue Router we will use the <RouterLink> component. This component provides a way to create navigation links.

When clicking on a <RouterLink>, Vue Router loads the component associated with the route without reloading the page.

<template>
  <nav>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink>
    <RouterLink to="/contact">Contact</RouterLink>
  </nav>
</template>

Active Styles

You can use the .router-link-active class (or .router-link-exact-active for exact matches) to visually highlight the link of the current page.

We can also use props like active-class to define custom CSS classes when the route is active:

<RouterLink to="/about" active-class="active-link">
  About
</RouterLink>

Lazy Loading Components

It is also possible to load components lazily. This means the component will only load when its route is accessed (instead of on initial load).

This helps improve application performance, especially when it has many components, or they are very heavy, or some of them are not visited frequently.

const routes = [
    {
        path: '/about',
        component: () => import('./views/About.vue'),
    },
];