In this article, we are going to learn how to redirect and aliasing in Vue.js router. So let’s start:

Table of Contents

1. Redirect
2. Alias

Redirect

Suppose, we have about page and its route is /about. Now we wanted to redirect users to the about page if they write /about-us in the URL.

To do this we need to add an extra redirect route. Here’s the example:

const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/about",
      component: About
    },
    {
      path: "/about-us",
      redirect: "/about"
    }
  ]
})

We have added an extra redirect route for about route. Now it’ll redirect users to about page if they enter /about-us in the URL.

Alias

Assume, we don’t want to redirect users to /about route if they visit /about-us but will see the same content of about page. This is called aliasing.

To do this, we just need to add alias key in the route array. Let’s see the example:

const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/about",
      component: About,
      alias:'/about-us'
    }
  ]
})

Now if users visit /about-us, they won’t redirect to /about the route but will see the same content of about page.