Vue Router Patterns Chapter 20Here's an example that simply logs out the route the user is going to and coming from.
Each one of the following examples assume that the router exists in scope similar to the
following:
const router = new VueRouter({
routes
})router.beforeEach((to, from, next) => {
console.log(`Route to`, to)
console.log(`Route from`, from)
next();
});Once again, we have to call next() to trigger the next route guard.
beforeResolve
The beforeResolve global route guard is triggered just before navigation is confirmed,
but it's important to know that this is only after all component-specific guards and async
components have been resolved.
Here's an example:
router.beforeResolve((to, from, next) => {
console.log(`Before resolve:`)
console.log(`Route to`, to)
console.log(`Route from`, from)
next();
});afterEach
We can also hook into the global afterEach function that allows us to perform the
action(s), but we can't affect navigation and thus only have access to the to and from
parameters:
router.afterEach((to, from) => {
console.log(`After each:`)
console.log(`Route to`, to)
console.log(`Route from`, from)
});