Vue Router Patterns Chapter 20Resolution stack
Now that we've familiarized ourselves with the various different route lifecycle hooks on
offer, it's worth investigating the entire resolution stack whenever we attempt to navigate
to another route:
- Trigger a route change:
This is the first stage of any route lifecycle and is triggered any time we attempt to
navigate to a new route. An example would be going from /hello/Paul to
/hello/Katie. No Navigation Guards have been triggered at this point. - Trigger component leave guards:
Next, any leave guards are triggered, such as beforeRouteLeave, on loaded
components. - Trigger global beforeEach guards:
As global route middleware can be created with beforeEach, these functions
will be called prior to any route update. - Trigger local beforeRouteUpdate guards in reused components:
As we saw earlier, whenever we navigate to the same route with a different
parameter, the lifecycle hooks aren't fired twice. Instead, we use
beforeRouteUpdate to trigger lifecycle changes. - Trigger beforeRouteEnter in components:
This is called each time prior to navigating to any route. At this stage, the
component isn't rendered, so it doesn't have access to the this component
instance. - Resolve asynchronous route components:
It then attempts to resolve any asynchronous components in your project. Here's
an example of one:
const MyAsyncComponent = () => ({
component: import ('./LazyComponent.vue'),
loading: LoadingComponent,
error: ErrorComponent,
delay: 150,
timeout: 3000
})- Trigger beforeRouteEnter in successfully activated components:
We now have access to the beforeRouteEnter hook and can perform any
action(s) prior to resolving the route.