Creating global guards

There are two global guards offered by Vue Router – global before guards and global after guards. Let's learn how to use them before applying them to our app:

• Global before guards: Global before guards are called when a route is being entered. They are called in a specific order and can be asynchronous. The navigation is always in wait until all the guards are resolved. We can register these guards using the beforeEach method from Vue Router, as follows:

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => { ... })

• Global after guards: Global after guards are called after a route has been entered. Unlike global before guards, global after guards do not have the next function, and so they do not affect navigation. We can register these guards using the afterEach method from Vue Router, as follows:

const router = new VueRouter({ ... })
router.afterEach((to, from) => { ... })

Let's create a Vue app...