Exploring the New Vue Router: Navigating Your VueJS App with Ease

Vue Router plays a crucial role in creating dynamic and engaging Single Page Applications (SPAs). The latest version, aligned with the release of Vue 3, introduces a range of exciting updates and enhancements. These improvements are designed to streamline the development process and provide new tools for building more sophisticated and efficient applications. In this article, we'll explore these new features and discuss how they can elevate your Vue 3 projects.

These are the following topics that we are going to discuss:

Why Use Vue Router?

Vue Router plays an important role in building SPAs, as it enables navigation between different parts of the app without refreshing the page. This leads to a smoother and more efficient user experience. Moreover, Vue Router comes with features like nested routes, route guards, and the ability to navigate programmatically, making it a comprehensive tool for managing navigation and state in an application.

Installing from Vue CLI

First, install Vue CLI if you haven't already:

npm install -g @vue/cli

Create a new project:

vue create my-vue-app
cd my-vue-app

Add Vue Router:

vue add router

This command scaffolds the project and sets up the Vue Router with basic configurations.

Vue Router Basics

Once you've set up Vue Router, it's essential to understand its basic functionalities, such as installation, configuration, and navigation.

Installation:

To install Vue Router, use the following npm command:

npm install vue-router@next

Configuration:

Initialize the router instance in a dedicated router directory:

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

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

Navigation:

Use the RouterLink component for declarative navigation:

<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>

New Features in Vue Router 3

Vue Router 3 introduces several new features that enhance the development experience, especially with the introduction of Vue 3.

• Improved Composition API Support: Vue Router 3 integrates effortlessly with Vue 3's Composition API, enabling developers to manage route logic and guards within the setup function.
• Lazy Loading for Improved Performance: The implementation of lazy loading in Vue Router 3 is straightforward, which helps minimize initial load times by loading components only as needed.
• Navigation Guards: Navigation guards in Vue Router 3 allow for detailed control over navigation, facilitating tasks like authentication verification and data pre-loading.
• Improved Type Safety: By incorporating TypeScript, Vue Router 3 offers improved type safety, which helps in identifying and resolving potential errors early in development.

Beyond the Basics

In addition to its core features, Vue Router offers advanced functionalities that allow developers to build more sophisticated applications.

Named Routes: These routes provide a convenient way to reference routes, especially useful in programmatic navigation.

const routes = [
  { path: '/user/:id', name: 'User', component: User },
];

this.$router.push({ name: 'User', params: { id: 123 } });

Dynamic Segments: Dynamic segments in routes allow for more flexible and dynamic routing.

const routes = [
  { path: '/user/:id', component: User },
];

const userId = this.$route.params.id;

Lazy Loading for Improved Performance: As mentioned earlier, lazy loading reduces the initial load time by only loading components when needed.

Handling 404 Not Found: You can handle 404 errors gracefully by creating a catch-all route.

const routes = [
  { path: '/:catchAll(.*)', component: NotFound },
];

Custom Route Transitions: Add custom transitions to enhance the user experience during route changes.

<template>
  <transition name="fade">
    <router-view></router-view>
  </transition>
</template>
<style>
     .fade-enter-active, .fade-leave-active {
         transition: opacity 0.5s;
     }
</style>

Route Meta Fields for Enhanced Route Information: Meta fields provide additional information for routes, useful for tasks like setting titles or managing access control.

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

Programmatic Navigation: Use router.push and router.replace methods for programmatic navigation between routes.

// Navigating to a different route
this.$router.push('/dashboard');

// Replacing the current route
this.$router.replace('/profile');

Example: Below is the basic example of vue router.

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>

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

<script>
export default {
  name: 'App',
};
</script>

<style>
nav {
  display: flex;
  gap: 10px; /* Adjust the gap value as needed */
}
</style>

import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
import AboutView from '../views/AboutView.vue';

const routes = [
  { path: '/', component: HomeView },
  { path: '/about', component: AboutView },
];

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

export default router;

<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the home page.</p>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
};
</script>

<template>
  <div>
    <h1>About Page</h1>
    <p>Learn more about us on this page.</p>
  </div>
</template>

<script>
export default {
  name: 'AboutView',
};
</script>

Output:

Conclusion

Vue Router 3, with its new features and improvements, offers a comprehensive and efficient way to build SPAs with Vue 3. From enhanced Composition API support to performance improvements with lazy loading, Vue Router 3 is a must-have tool for modern Vue applications. Whether you're building a simple app or a complex one, Vue Router provides the flexibility and control needed to manage your application's navigation and state effectively.