Vue Router 4–Navigation Guards
Tags: vue, webdev, programming, javascript
Published: 2021-01-25 23:29:53

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


**Vue Router 4 is in beta and it’s subject to change.**

To build a single page app easily, we got to add routing so that URLs will be mapped to components that are rendered.

In this article, we’ll look at how to use Vue Router 4 with Vue 3.

### Navigation Guards

We can add navigation guards to guard navigation by redirecting or canceling it.

The guards are only triggered when we navigate to different routes.

URL parameters and query changes won’t trigger enter or leave navigation guards.

### Global Before Guards

We can add a global before guard by passing a callback to the `router.beforeEach` method.

For example, we can write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue-router@4.0.0-beta.7/dist/vue-router.global.js"></script>
    <title>App</title>
  </head>
  <body>
    <div id="app">
      <p>
        <router-link to="/foo">foo</router-link>
        <router-link to="/bar">bar</router-link>
      </p>
      <router-view></router-view>
    </div>
    <script>
      const Foo = {
        template: "<div>foo</div>"
      };
      const Bar = {
        template: "<div>bar</div>",
        props: ["id"]
      };
      const routes = [
        {
          path: "/foo",
          component: Foo
        },
        {
          path: "/bar",
          component: Bar
        }
      ];
      const router = VueRouter.createRouter({
        history: VueRouter.createWebHistory(),
        routes
      });

      router.beforeEach((to, from, next) => {
        console.log(to, from);
        next();
      });
      const app = Vue.createApp({});
      app.use(router);
      app.mount("#app");
    </script>
  </body>
</html>
```

We call the `router.beforeEach` method with a callback.

The callback takes a `to` , `from` and `next` parameters.

`to` is a route object being navigated to.

`from` is a route object being navigated away from.

A route object has the `fullPath` , metadata, query parameters, URL parameters, and more.

`next` is a function that must be called to resolve the hook.

We need to call `next` to show the `to` route.

The `next` function can take an argument.

If we pass in `false` , then the current navigation is aborted.

If the browser URL is changed, then it’ll reset to the one in the `from` route.

We can also pass in a path string or an object with the `path` property with the path string.

Either way, we redirect to a different location.

The current navigation is aborted and a new one will be started.

The object can have extra options like the `replace` and `name` properties from the route.

Any properties that are accepted by `router.push` is accepted.

We can also pass in an `Error` instance if there are any errors.

Then the navigation will be aborted and the error will be passed to callbacks registered with `router.onError()`.

We should make sure that `next` is called exactly once in the callback.

Otherwise, the navigation may never resolve or errors may result.

So instead of writing:

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

We write:

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

### Global Resolve Guards

We can register a global guard with `router.beforteResolve` .

It’s similar to `router.beforeEach` except that it’ll be called right before the navigation is confirmed.

### Conclusion

We can add navigation guards to control navigation with Vue Router 4.