add beforeResolve hook

Author: yyx990803

docs/en/advanced/data-fetching.md

@@ -84,31 +84,28 @@ export default {
   },
   beforeRouteEnter (to, from, next) {
     getPost(to.params.id, (err, post) => {
-      if (err) {
-        // display some global error message
-        next(false)
-      } else {
-        next(vm => {
-          vm.post = post
-        })
-      }
+      next(vm => vm.setData(err, post))
     })
   },
   // when route changes and this component is already rendered,
   // the logic will be slightly different.
-  watch: {
-    $route () {
-      this.post = null
-      getPost(this.$route.params.id, (err, post) => {
-        if (err) {
-          this.error = err.toString()
-        } else {
-          this.post = post
-        }
-      })
+  beforeRouteUpdate (to, from, next) {
+    this.post = null
+    getPost(to.params.id, (err, post) => {
+      this.setData(err, post)
+      next()
+    })
+  },
+  methods: {
+    setData (err, post) {
+      if (err) {
+        this.error = err.toString()
+      } else {
+        this.post = post
+      }
     }
   }
 }
 ```
 
-The user will stay on the current view while the resource is being fetched for the incoming view. It is therefore recommended to display a progress bar or some kind of indicator while the data is being fetched. If the data fetch fails, it's also necessary to display some kind of global warning message.
+The user will stay on the previous view while the resource is being fetched for the incoming view. It is therefore recommended to display a progress bar or some kind of indicator while the data is being fetched. If the data fetch fails, it's also necessary to display some kind of global warning message.

docs/en/advanced/navigation-guards.md

@@ -2,7 +2,7 @@
 
 As the name suggests, the navigation guards provided by `vue-router` are primarily used to guard navigations either by redirecting it or canceling it. There are a number of ways to hook into the route navigation process: globally, per-route, or in-component.
 
-Remember **Params or queries changes won't trigger navigation guards**. Simply [watch the `$route` object](../essentials/dynamic-matching.md#reacting-to-params-changes) to react to those changes.
+Remember that **params or query changes won't trigger enter/leave navigation guards**. You can either [watch the `$route` object](../essentials/dynamic-matching.md#reacting-to-params-changes) to react to those changes, or use the `beforeRouteUpadte` in-component guard.
 
 ### Global Guards
 
@@ -36,6 +36,14 @@ Every guard function receives three arguments:
 
 **Make sure to always call the `next` function, otherwise the hook will never be resolved.**
 
+### Global Resolve Guards
+
+> New in 2.5.0
+
+In 2.5.0+ you can register a global guard with `router.onResolve`. This is similar to `router.beforeEach`, with the difference that resolve guards will be called right before the navigation is confirmed, **after all in-component guards and async route components are resolved**.
+
+### Global After Hooks
+
 You can also register global after hooks, however unlike guards, these hooks do not get a `next` function and cannot affect the navigation:
 
 ``` js
@@ -109,3 +117,18 @@ beforeRouteEnter (to, from, next) {
 ```
 
 You can directly access `this` inside `beforeRouteLeave`. The leave guard is usually used to prevent the user from accidentally leaving the route with unsaved edits. The navigation can be canceled by calling `next(false)`.
+
+### The Full Guard Resolution Flow
+
+1. Navigation triggered
+2. Call leave guards in deactivated components
+3. Call global `beforeEach` guards
+4. Call `beforeRouteUpdate` guards in reused components (2.2+)
+5. Call `beforeEnter` in route configs
+6. Resolve async route components
+7. Call `beforeRouteEnter` in activated components
+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.

docs/en/api/router-instance.md

@@ -23,6 +23,7 @@
 ### Methods
 
 - **router.beforeEach(guard)**
+- **router.beforeResolve(guard)** (2.5.0+)
 - **router.afterEach(hook)**
 
   Add global navigation guards. See [Navigation Guards](../advanced/navigation-guards.md).

src/history/base.js

@@ -147,10 +147,11 @@ export class History {
     runQueue(queue, iterator, () => {
       const postEnterCbs = []
       const isValid = () => this.current === route
-      const enterGuards = extractEnterGuards(activated, postEnterCbs, isValid)
       // wait until async components are resolved before
       // extracting in-component enter guards
-      runQueue(enterGuards, iterator, () => {
+      const enterGuards = extractEnterGuards(activated, postEnterCbs, isValid)
+      const queue = enterGuards.concat(this.router.resolveHooks)
+      runQueue(queue, iterator, () => {
         if (this.pending !== route) {
           return abort()
         }

src/index.js

@@ -29,13 +29,15 @@ export default class VueRouter {
   matcher: Matcher;
   fallback: boolean;
   beforeHooks: Array<?NavigationGuard>;
+  resolveHooks: Array<?NavigationGuard>;
   afterHooks: Array<?((to: Route, from: Route) => any)>;
 
   constructor (options: RouterOptions = {}) {
     this.app = null
     this.apps = []
     this.options = options
     this.beforeHooks = []
+    this.resolveHooks = []
     this.afterHooks = []
     this.matcher = createMatcher(options.routes || [], this)
 
@@ -120,6 +122,10 @@ export default class VueRouter {
     this.beforeHooks.push(fn)
   }
 
+  onResolve (fn: Function) {
+    this.resolveHooks.push(fn)
+  }
+
   afterEach (fn: Function) {
     this.afterHooks.push(fn)
   }

types/router.d.ts

@@ -21,14 +21,16 @@ declare class VueRouter {
   currentRoute: Route;
 
   beforeEach (guard: NavigationGuard): void;
+  onResolve (guard: NavigationGuard): void;
   afterEach (hook: (to: Route, from: Route) => any): void;
   push (location: RawLocation, onComplete?: Function, onAbort?: Function): void;
   replace (location: RawLocation, onComplete?: Function, onAbort?: Function): void;
   go (n: number): void;
   back (): void;
   forward (): void;
   getMatchedComponents (to?: RawLocation): Component[];
-  onReady (cb: Function): void;
+  onReady (cb: Function, errorCb?: Function): void;
+  onError (cb: Function): void;
   addRoutes (routes: RouteConfig[]): void;
   resolve (to: RawLocation, current?: Route, append?: boolean): {
     location: Location;