Understanding Router Hooks
To understand Vue Router Hooks, first, we need to understand the general flow of route navigation as described in the following diagram:
Figure 7.19 – Navigation resolution flow diagram
Once navigation is triggered for 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, andbeforeRouteLeave
For Composition API, those in-component Hooks are available as onBeforeRouteUpdate, and onBeforeRouteLeave. There is no onBeforeRouteEnter since this is equivalent to using the setup() (or script setup) itself.
As seen in Figure 7.19, the Vue engine considers navigation only...