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>
const Home = { template: '<div>Welcome to the Home Page</div>' };
const Dashboard = { template: '<div>Dashboard Content</div>' };
const routes = [
path: '/',
component: Home,
name: 'home',
alias: '/welcome' // Route alias
path: '/dashboard',
component: Dashboard,
name: 'dashboard'
const router = new VueRouter({
const app = new Vue({
el: '#app',

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.