Programmatic Navigation and Guards in Vue.js

4 min
Advanced

Programmatic navigation refers to the ability to change routes through code instead of clicking on a <router-link>.

This is very useful in some circumstances. For example, when we need to redirect the user after certain actions (like a successful login or form validation).

Vue Router provides several methods to perform programmatic navigation:

Method	Description
`router.push()`	Navigates to a new route and adds an entry to the browser’s history.
`router.replace()`	Similar to `push`, but does not add a new entry to the history.
`router.go()`	Navigates forward or backward in the history (similar to the browser’s native history).

// In a component method
methods: {
  redirectToHome() {
    this.$router.push('/home');
  }
}

Copied!

This code redirects the user to the /home route when the redirectToHome method is called.

// In a component method
methods: {
  replaceCurrentRoute() {
    this.$router.replace('/new-route');
  }
}

Copied!

This code replaces the current route with /new-route without adding a new entry to the history.

// In a component method
methods: {
  goBack() {
    this.$router.go(-1); // Navigates backward in the history
  }
}

Copied!

This code navigates back in the browser’s history.

Route Guards

Route guards are functions that execute before, during, or after navigation. They are useful for controlling access to specific routes, such as authentication.

Vue Router offers several types of guards:

Type	Scope
Global guards	All routes
Per-route guards	Specific routes
In-component guards	Individual components

Global guards are defined on the router instance and affect all routes. The most common ones are:

beforeEach: Executes before each navigation.
beforeResolve: Executes after all component guards and async components have been resolved.
afterEach: Executes after each navigation.

const router = new VueRouter({
  routes: [
    // Route definitions
  ]
});

router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuth(); // Function that checks authentication
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login'); // Redirects to login if not authenticated
  } else {
    next(); // Continues with the navigation
  }
});

Copied!

This code checks if the user is authenticated before allowing access to routes that require authentication.

Per-route guards are defined directly in the configuration of a specific route. The most common one is:

beforeEnter: Executes before entering the route.

const router = new VueRouter({
  routes: [
    {
      path: '/dashboard',
      component: Dashboard,
      beforeEnter: (to, from, next) => {
        const isAdmin = checkAdmin(); // Function that checks if the user is an admin
        if (!isAdmin) {
          next('/unauthorized'); // Redirects if not an admin
        } else {
          next(); // Continues with the navigation
        }
      }
    }
  ]
});

Copied!

This code checks if the user is an administrator before allowing access to the /dashboard route.

In-component guards are defined inside components and allow for more granular control. The most common ones are:

beforeRouteEnter: Executes before the component is mounted.
beforeRouteUpdate: Executes when the route changes but the component is reused.
beforeRouteLeave: Executes before leaving the component.

export default {
  name: 'EditProfile',
  beforeRouteLeave(to, from, next) {
    if (this.unsavedChanges) {
      const confirmLeave = confirm('You have unsaved changes. Are you sure you want to leave?');
      if (confirmLeave) {
        next(); // Continues with the navigation
      } else {
        next(false); // Cancels the navigation
      }
    } else {
      next(); // Continues with the navigation
    }
  }
};

Copied!

This code shows a confirmation message if the user tries to leave the page with unsaved changes.

Programmatic Navigation Methods

Route Guards