From 98facf2385b1dc23142fdbf5f2512b3a4d72b7e7 Mon Sep 17 00:00:00 2001
From: Ciro Nunes <ciro@loyaltycorp.com.au>
Date: Thu, 1 Mar 2018 15:18:37 +1100
Subject: [PATCH] feat: introduce afterResolve navigation hook

---
 docs/en/advanced/navigation-guards.md | 18 ++++++++++++++++--
 examples/navigation-guards/app.js     | 12 ++++++++++++
 src/history/base.js                   |  5 ++++-
 src/index.js                          | 12 +++++++++---
 4 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/docs/en/advanced/navigation-guards.md b/docs/en/advanced/navigation-guards.md
index 5217e958d..17364555f 100644
--- a/docs/en/advanced/navigation-guards.md
+++ b/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.
diff --git a/examples/navigation-guards/app.js b/examples/navigation-guards/app.js
index 86f33c95e..e57a5f93f 100644
--- a/examples/navigation-guards/app.js
+++ b/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: `
diff --git a/src/history/base.js b/src/history/base.js
index 0c90dafa7..6f174b7f3 100644
--- a/src/history/base.js
+++ b/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() })
           })
         }
diff --git a/src/index.js b/src/index.js
index a1a7b8507..2476b953b 100644
--- a/src/index.js
+++ b/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)
   }