Redirect and Alias in Vue Router

Published on December 21, 2019 39 sec read

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.

Author

Hey, I'm Md Obydullah. I build open-source projects and write on Laravel, Linux server, modern JavaScript and more on web development. If you enjoy my content, please consider supporting what I do!

Follow Buy me a coffeeBuy me a coffee

Leave a Reply

Your email address will not be published. Required fields are marked *