By Jonathan Massa

Technology Expert

Views: 2

Software engineering

Partager l’article

In a landscape where web interfaces demand speed and fluidity, setting up a robust navigation system is a key lever for user satisfaction and maintainability. This article provides a complete overview of routing in Vue.js, from a lightweight custom implementation to mastering the official Vue Router library.

You’ll discover the mechanisms, advantages, and limitations of each approach, along with best practices to ensure performance, scalability, and CI/CD integration. Through concrete examples drawn from projects in Switzerland, we highlight the business and technical challenges facing demanding IT teams.

Understanding Native Routing in Vue.js and Its Challenges

Proper client-side navigation reduces server round-trips and enhances the perceived user experience. This section details the Vue.js ecosystem and shows how to implement a minimal router without external dependencies.

The Vue.js Ecosystem and Business Considerations

Vue.js is built on Single-File Components (SFCs) that combine template, script, and style. The two major paradigms—Options API and Composition API—offer clear patterns for organizing logic and state.

In a single-page application (SPA), the user navigates without full-page reloads, preserving application state and accelerating interactions. This fluidity is essential for ensuring an optimal conversion rate and minimizing churn.

From a business perspective, client-side navigation reduces server load and infrastructure costs, while facilitating rapid deployment of new features. The modularity provided by Vue.js accelerates time-to-market and improves maintainability.

Implementing a Minimal Router with hashchange

A native router can rely on the window.location.hash property and the hashchange event. You define a simple mapping table between path and component.

Example code for a project initialized with Vite:

const routes = {
  '#/': Home,
  '#/about': About
};
const currentView = Vue.ref(routes[window.location.hash] || routes['#/']);
window.addEventListener('hashchange', () => {
  currentView.value = routes[window.location.hash] || routes['#/'];
});

In your App.vue, you can write:

<div>
  <nav>
    <a href="#/">Home</a>
    <a href="#/about">About</a>
  </nav>
  <component :is="currentView"></component>
</div>

The Home.vue and About.vue components contain their usual template and script. This approach requires no server configuration and is suitable for prototypes or small sites.

Advantages and Limitations of Native Routing

The main advantage of a homemade router is the absence of external dependencies and the simplicity of implementation. No special build process or redirect scripts are needed in production.

This method suits applications with fewer than five routes and no need for dynamic parameters or programmatic navigation. It enables rapid prototyping and a direct understanding of the routing mechanics.

However, as soon as the project grows, handling dynamic routes (/users/:id), nested routes, or navigation guards becomes unmanageable. There is no built-in API for conditional redirects or hooks, and code tends to become scattered.

For example, an internal portal developed for an SME showed that adding multiple pages led to fragmented code and an increasing risk of inconsistencies.

Moving to Vue Router: Basic Configuration and Navigation

Vue Router is the official library for medium to large Vue.js SPAs. This section covers its installation, initial configuration, and both declarative and programmatic navigation modes.

Installing and Configuring the Router

To get started, install Vue Router via npm:

npm install vue-router@4

Then, in main.js:

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

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

This configuration initializes a History-mode router and declares two primary routes. The Vue application is then linked to the router before mounting.

Declarative Navigation with router-link and router-view

The HTML markup is replaced by the <router-link> and <router-view> components. The former generates links compatible with History or Hash mode, and the latter dynamically displays the component associated with the active route.

Example:

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
  <router-view></router-view>
</template>

Programmatic Navigation with the Router

To trigger navigation from code, use the router’s methods. With the Options API: this.$router.push('/path') or this.$router.replace('/path'). With the Composition API:

import { useRouter } from 'vue-router';
setup() {
  const router = useRouter();
  function goToHome() {
    router.push({ name: 'home' });
  }
  return { goToHome };
}

These methods allow conditional redirects, simulate the back button (router.go(-1)), or replace history entries without adding a new one.

One organization migrated its portal to Vue Router and centralized its login redirects in a global middleware, simplifying maintenance and reducing bugs.

Edana: strategic digital partner in Switzerland

We support companies and organizations in their digital transformation

Let's talk about you

Advanced Routes, History Modes, and Secure Navigation

For complex applications, Vue Router offers named, dynamic, and nested routes, multiple history modes, and guards to control access. This section explores these advanced features.

Named, Dynamic, and Nested Routes

Declaring a route with a name attribute simplifies future references and refactoring. Dynamic paths use the /users/:id format and capture parameters in $route.params.

Nested routes (children) help structure composite pages, such as a parent /dashboard with its child tabs.

Example:

routes: [
  {
    path: '/user/:id',
    name: 'user-profile',
    component: UserProfile,
    children: [
      { path: 'settings', component: UserSettings },
      { path: 'activity', component: UserActivity }
    ]
  }
]

A retail chain used this setup to dynamically load user profiles and their submodules. The approach significantly reduced redundant code and improved refactoring tolerance.

History vs. Hash Modes and Server Configuration

Vue Router offers createWebHashHistory() (URLs with #) and createWebHistory() (HTML5 History API). Hash mode requires no server configuration, while History mode provides clean URLs for SEO but requires redirecting all requests to index.html.

For an Nginx deployment:

location / {
  try_files $uri $uri/ /index.html;
}

In History mode, it’s crucial to anticipate these rewrites to avoid 404 errors on direct page reloads.

Navigation Guards and Access Security

Global guards (router.beforeEach), per-route (beforeEnter), and component-level (beforeRouteEnter, beforeRouteLeave) enable fine-grained access control.

Use case: verify a token before each navigation and redirect to the login page if no authentication is present. Guards support promise returns, allowing you to wait for an identity API call.

Example:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next({ name: 'login' });
  } else {
    next();
  }
});

This approach centralizes security checks and avoids scattering them across components.

Optimization, SSR/Nuxt, and Testing for Quality Routing

Improving performance with code splitting, leveraging SSR with Nuxt.js for SEO, and integrating automated tests ensure reliable, maintainable routing over time.

Lazy Loading and Bundle Splitting

Dynamic routing enables deferred component loading using the () => import('...') syntax. This generates separate chunks and reduces the initial bundle size.

In configuration:

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

Mobile users and unstable networks particularly benefit from this technique, accelerating time-to-interactive.

SSR/Nuxt Integration and SEO

Nuxt.js automates route creation via the pages/ directory and offers SSR or SSG modes for optimized indexing. Each .vue file becomes a route, and nuxt.config allows you to define metadata and head tags.

With SSR, content is rendered server-side, improving SEO and perceived performance. meta tags are managed natively for each page.

Testing and Best Practices for a Reliable Router

Unit tests with Jest can simulate navigation by instantiating the router and verifying route resolution. End-to-end tests (Cypress, Playwright) automate full user flows to validate routing consistency.

It’s important to integrate these tests into your CI/CD pipeline to catch regressions early. Following DRY naming conventions and separating router files by functional domain enhances maintainability.

A healthcare organization implemented end-to-end tests covering navigation between patient records, ensuring compliance and error-free version updates.

Optimize Your Vue Navigation to Boost Performance and Maintainability

Choosing the right router—whether a simple native solution for rapid prototypes or Vue Router for robust applications—is a strategic foundation. Named routes, history mode selection, navigation guards, and lazy loading are essential levers to master for a smooth user experience and maintainable codebase.

Our contextual, modular, ROI-driven approach guides you from architecture audits to implementing automated tests and CI/CD processes. Our experts partner with you to define the routing strategy best suited to your business needs, ensure scalability, and secure your deployment.

Discuss your challenges with an Edana expert