LuisLlamas Logo
EN
que-es-vue-router

What is Vue Router and how to use it

  • 3 min
  • Intermediate

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 occurs without reloading the page.

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

Main features

  • Dynamic routes: Allows defining routes with dynamic parameters
  • Programmatic navigation: Change routes via JavaScript code
  • Route guards: Control access to specific routes
  • Lazy loading: Load components on demand to improve performance

Installing Vue Router

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

npm install vue-router

Basic configuration

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

We will create a route configuration file. For example, router.js in the src folder of your project.

// 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;

Here we establish the relationship between the path and the component to be rendered.

Now we need to import and use the router in the application. To do this, in the main file of your application (main.js or main.ts), we import the file we just created.

// 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');

Finally, we add the <RouterView> component to our main file App.vue,

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

<template>
<RouterView />
</template>

This component is responsible for rendering the views (its content will be replaced by the component we navigate to).

Creating basic routes

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

Each route has two main properties:

  • path: The URL that will trigger the route.
  • component: The component that will be rendered when the route is accessed.
const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact },
];

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.

It is similar to the <a> tag in HTML, but works with Vue Router.

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>
  • to: Specifies the destination route (equivalent to the href in an HTML link).

Active styles

You can use the class .router-link-active (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 on demand. This means that the component will only be loaded when accessing its route (instead of on initial load).

This helps improve application performance, especially when there are many components, or they are very heavy, or one of them is not frequently visited.

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

Don’t overdo it, because it also has its disadvantages (the component has to be loaded).

Use it when you meet one of the conditions I mentioned.

On this page