-
Book Overview & Buying
-
Table Of Contents
Frontend Development Projects with Vue.js 3 - Second Edition
By :
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:
beforeEach, beforeResolve, and afterEachbeforeEnterbeforeRouteUpdate, beforeRouteEnter, and beforeRouteLeaveFor 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...