Router Hooks

The general flow of route navigation is described in the following diagram:

Figure 6.23: Navigation resolution flow diagram

Once navigation is triggered on a certain route, Vue Router provides several primary navigation guards, or Hooks, for developers to guard or intercept that navigation process. These guards can be hooked either globally or in the component, depending on the type. Some examples are as follows:

• Globally: beforeEach, beforeResolve, and afterEach
• Per component: beforeEnter
• In-component: beforeRouteUpdate, beforeRouteEnter, and beforeRouterLeave

As seen in Figure 6.23, navigation is considered completed only after all the Hooks or guards have been resolved, including any asynchronous guard. Now, let's see how to set up beforeEach Hooks.

Setting up beforeEach Hooks

beforeEach is a global Hook and is called at the very beginning of navigation, before the other global and in-component Hooks are triggered...