Vue.js Vue-Router Named Routes - Route Aliases

Introduction

Vue-Router, the official routing library for Vue.js, provides named routes, which allow you to create named paths for your routes. Route aliases, a feature of named routes, enable you to define multiple route names for a single route configuration. In this guide, we'll explore how to use route aliases in Vue-Router and provide sample code to demonstrate the process.

Sample Code

Let's create a Vue.js application that uses route aliases:

<div id=`app`>
  <router-link :to=`{ name: 'home' }`>Home</router-link>
  <router-link :to=`{ name: 'dashboard' }`>Dashboard</router-link>
  <router-view></router-view>

            
In this code:
            
                
We create a Vue component with two router links and a router view for rendering the route components.
                
We define two route components: Home and Dashboard.
                
In the `routes` array, we configure two routes: one for the Home component and another for the Dashboard component.
                
For the Home route, we set a name of 'home' and define an alias of '/welcome' to create a route alias.
                
We create a VueRouter instance with the defined routes.
                
The router is then added to the Vue instance to enable Vue-Router functionality in the application.