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.

Vue Router 4–Navigation Guards

Navigation Guards

Global Before Guards

Global Resolve Guards

Conclusion