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, andafterEach - Per component:
beforeEnter - In-component:
beforeRouteUpdate,beforeRouteEnter, andbeforeRouterLeave
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...
