// Tutorial //

Advanced Routing with Vue and Vue Router: Redirects & Nav Guards

Published on March 13, 2020 · Updated on April 16, 2020
Default avatar
By Jim Toth
Developer and author at DigitalOcean.
Advanced Routing with Vue and Vue Router: Redirects & Nav Guards

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

While the basics of routing in Vue.js have already been covered, today we’ll explore some other features Vue Router has to offer such as redirects and navigation guards.

Other advanced Vue Router topics already covered include Route Meta Fields and Nested Routes so make sure to check those out. With that said, let’s get started!

Setup

Since this is about advanced routing features offered by Vue Router, you probably already know how to accomplish a basic setup. Just in case, here’s a bare-bones setup:

# Yarn
$ yarn add vue-router
# NPM
$ npm install vue-router --save
main.js
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const Swamp = { template: '<div>Swamp</div>' };
const Gator = { template: '<div>Gator</div>' };

const router = new VueRouter({
  routes: [
    { path: '/swamp', component: Swamp },
    { path: '/gator', component: Gator }
  ]
});

const app = new Vue({
  router
}).$mount('#app');

Redirects

There are a few ways we can accomplish redirects with Vue Router. Redirects will change the route to the intended target and reflect this change in the current URL.

const router = new VueRouter({
  routes: [
    { path: '/swamp', component: Swamp },
    { path: '/gator', component: Gator },
    { path: '/croc', redirect: '/gator' }
  ]
});

When a user navigates to /croc, instead they’ll be redirected to /gator and the URL in the address bar will be /gator.

We can also use a function to accomplish dynamic routing:

const router = new VueRouter({
  routes: [
    { path: '/swamp', component: Swamp },
    { path: '/gator', component: Gator },
    { path: '/croc', redirect: to => {
  return '/gator';
}}
  ]
});

In the above code, the argument to contains the original target route object with information such as the route’s path or name.

Aliases

Aliases are like redirects but do not update the URL when the route is matched.

const router = new VueRouter({
  routes: [
    { path: '/swamp', component: Swamp, alias: '/bayou' },
    { path: '/gator', component: Gator },
    { path: '/croc', redirect: to => {
      return '/gator';
    }}
  ]
});

With the above configuration, a user navigating to /swamp will get the Swamp component with a url of /swamp. If a user instead navigates to /bayou, they’ll still get the Swamp component but the url will remain /bayou.

Now that we’ve covered Redirects, let’s cover a related but more complex topic: Navigation Guards. Navigation Guards allow us to dynamically prevent navigation in vue-router via redirects or cancellation. If a user of our app doesn’t have permissions to view /admin, we can either cancel or redirect the user to an appropriate alternate route. This is important so users aren’t exposed to components that aren’t relevant to their interests.

As a basic example, we can use a simple Navigation Guard to redirect a user to a login page if they are not yet authenticated:


  const router = new VueRouter({
  routes: [
    { path: '/swamp', component: Swamp, alias: '/bayou' },
    { path: '/gator', component: Gator },
    { path: '/croc', redirect: to => {
      return '/gator';
    }},
    { path: '/login', name: 'login', component: Login }
  ]
});

router.beforeEach((to, from, next) => {
  if (to.name !== 'login' && !isAuthenticated) {
    next({ name: 'login' });
  } else {
    next();
  }
});

We can also define guards on a per-route basis:


  const router = new VueRouter({
  routes: [
    { path: '/swamp', component: Swamp, alias: '/bayou' },
    {
  path: '/gator',
  component: Gator,
  beforeEnter: (to, from, next) => {
    console.log(`${from.path} to ${to.path}?`);
    next();
  }
},
    { path: '/croc', redirect: to => {
      return '/gator';
    }},
    { path: '/login', name: 'login', component: Login }
  ]
});

Make sure to only ever call next() one time or you could run into errors or incorrect path resolution!

Components themselves can also enforce their own guards. One way this could be useful is to ask a user if they meant to navigate away, and cancel the navigation by passing false to next(); We also have access to the component’s this which allows us to use the component’s methods and properties in determining our routing logic.

const Swamp = {
  template: '<div>Swamp</div>',
  beforeRouteEnter(to, from, next) {
    console.log('Welcome to the swamp!');
    next();
  },
  beforeRouteLeave(to, from, next) {
    const answer =
      window.confirm('Are you sure you want to leave?');

    if (answer) {
      next();
    } else {
      next(false);
    }
  }
};

Please remember, as this code runs in the browser a user will have access to all code for your app regardless of Navigation Guards. When working on production applications always remember to implement proper validation and permission checking on the back-end!

Wrapping Up

We already know Vue Router is a great solution to provide routing in your Vue app, but today we’ve covered some advanced use-cases that Vue Router supports out-of-the-box. As always, make sure to review the official documentation. Check out some other advanced features such as Transitions to spice up your app or Lazy Loading Routes to increase performance.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Jim Toth

author

Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!