feat: introduce afterResolve navigation hook

docs/en/advanced/navigation-guards.md

@@ -52,6 +52,19 @@ router.afterEach((to, from) => {
 })
 ```
 
+### Global After Resolve Hooks
+
+> New in 3.1.0
+
+Similarly to `afterEach` hooks, you can also register `afterResolve` hooks that will be triggered after the URL changes. 
+They don't have a `next` function as they cannot affect the navigation:
+
+```js
+router.afterResolve((to, from) => {
+  // ...
+})
+```
+
 ### Per-Route Guard
 
 You can define `beforeEnter` guards directly on a route's configuration object:
@@ -151,5 +164,6 @@ beforeRouteLeave (to, from , next) {
 8. Call global `beforeResolve` guards (2.5+).
 9. Navigation confirmed.
 10. Call global `afterEach` hooks.
-11. DOM updates triggered.
-12. Call callbacks passed to `next` in `beforeRouteEnter` guards with instantiated instances.
+11. Call global `afterResolve` hooks after the URL is changed (3.1+).
+12. DOM updates triggered.
+13. Call callbacks passed to `next` in `beforeRouteEnter` guards with instantiated instances.

examples/navigation-guards/app.js

@@ -126,6 +126,18 @@ router.beforeEach((to, from, next) => {
   }
 })
 
+router.afterEach((to, from) => {
+  console.log(`to: ${to.fullPath}`)
+  console.log(`from: ${from.fullPath}`)
+  console.log(`Browser URL: ${window.location.pathname + window.location.hash}`)
+})
+
+router.afterResolve((to, from, next) => {
+  console.log(`to: ${to.fullPath}`)
+  console.log(`from: ${from.fullPath}`)
+  console.log(`Browser URL: ${window.location.pathname + window.location.hash}`)
+})
+
 new Vue({
   router,
   template: `

src/history/base.js

@@ -166,7 +166,7 @@ export class History {
       // wait until async components are resolved before
       // extracting in-component enter guards
       const enterGuards = extractEnterGuards(activated, postEnterCbs, isValid)
-      const queue = enterGuards.concat(this.router.resolveHooks)
+      const queue = enterGuards.concat(this.router.beforeResolveHooks)
       runQueue(queue, iterator, () => {
         if (this.pending !== route) {
           return abort()
@@ -175,6 +175,9 @@ export class History {
         onComplete(route)
         if (this.router.app) {
           this.router.app.$nextTick(() => {
+            this.router.afterResolveHooks.forEach(hook => {
+              hook && hook(route, current)
+            })
             postEnterCbs.forEach(cb => { cb() })
           })
         }

src/index.js

@@ -29,16 +29,18 @@ export default class VueRouter {
   matcher: Matcher;
   fallback: boolean;
   beforeHooks: Array<?NavigationGuard>;
-  resolveHooks: Array<?NavigationGuard>;
+  beforeResolveHooks: Array<?NavigationGuard>;
   afterHooks: Array<?AfterNavigationHook>;
+  afterResolveHooks: Array<?AfterNavigationHook>;
 
   constructor (options: RouterOptions = {}) {
     this.app = null
     this.apps = []
     this.options = options
     this.beforeHooks = []
-    this.resolveHooks = []
+    this.beforeResolveHooks = []
     this.afterHooks = []
+    this.afterResolveHooks = []
     this.matcher = createMatcher(options.routes || [], this)
 
     let mode = options.mode || 'hash'
@@ -123,13 +125,17 @@ export default class VueRouter {
   }
 
   beforeResolve (fn: Function): Function {
-    return registerHook(this.resolveHooks, fn)
+    return registerHook(this.beforeResolveHooks, fn)
   }
 
   afterEach (fn: Function): Function {
     return registerHook(this.afterHooks, fn)
   }
 
+  afterResolve (fn: Function): Function {
+    return registerHook(this.afterResolveHooks, fn)
+  }
+
   onReady (cb: Function, errorCb?: Function) {
     this.history.onReady(cb, errorCb)
   }