fix async component resolving

Author: yyx990803

src/create-matcher.js

@@ -33,44 +33,18 @@ export function createMatcher (routes: Array<RouteConfig>): Matcher {
       const record = nameMap[name]
       if (record) {
         location.path = fillParams(record.path, location.params, `named route "${name}"`)
-        return createRouteContext(record, location, redirectedFrom)
+        return _createRoute(record, location, redirectedFrom)
       }
     } else if (location.path) {
       location.params = {}
       for (const path in pathMap) {
         if (matchRoute(path, location.params, location.path)) {
-          return createRouteContext(pathMap[path], location, redirectedFrom)
+          return _createRoute(pathMap[path], location, redirectedFrom)
         }
       }
     }
     // no match
-    return createRouteContext(null, location)
-  }
-
-  function createRouteContext (
-    record: ?RouteRecord,
-    location: Location,
-    redirectedFrom?: Location
-  ): Route {
-    if (record && record.redirect) {
-      return redirect(record, redirectedFrom || location)
-    }
-    if (record && record.matchAs) {
-      return alias(record, location, record.matchAs)
-    }
-    const route: Route = {
-      name: location.name,
-      path: location.path || '/',
-      hash: location.hash || '',
-      query: location.query || {},
-      params: location.params || {},
-      fullPath: getFullPath(location),
-      matched: record ? formatMatch(record) : []
-    }
-    if (redirectedFrom) {
-      route.redirectedFrom = getFullPath(redirectedFrom)
-    }
-    return Object.freeze(route)
+    return _createRoute(null, location)
   }
 
   function redirect (
@@ -105,7 +79,7 @@ export function createMatcher (routes: Array<RouteConfig>): Matcher {
       }, undefined, location)
     } else {
       warn(false, `invalid redirect option: ${JSON.stringify(redirect)}`)
-      return createRouteContext(null, location)
+      return _createRoute(null, location)
     }
   }
 
@@ -123,14 +97,48 @@ export function createMatcher (routes: Array<RouteConfig>): Matcher {
       const matched = aliasedMatch.matched
       const aliasedRecord = matched[matched.length - 1]
       location.params = aliasedMatch.params
-      return createRouteContext(aliasedRecord, location)
+      return _createRoute(aliasedRecord, location)
+    }
+    return _createRoute(null, location)
+  }
+
+  function _createRoute (
+    record: ?RouteRecord,
+    location: Location,
+    redirectedFrom?: Location
+  ): Route {
+    if (record && record.redirect) {
+      return redirect(record, redirectedFrom || location)
     }
-    return createRouteContext(null, location)
+    if (record && record.matchAs) {
+      return alias(record, location, record.matchAs)
+    }
+    return createRoute(record, location, redirectedFrom)
   }
 
   return match
 }
 
+export function createRoute (
+  record: ?RouteRecord,
+  location: Location,
+  redirectedFrom?: Location
+): Route {
+  const route: Route = {
+    name: location.name,
+    path: location.path || '/',
+    hash: location.hash || '',
+    query: location.query || {},
+    params: location.params || {},
+    fullPath: getFullPath(location),
+    matched: record ? formatMatch(record) : []
+  }
+  if (redirectedFrom) {
+    route.redirectedFrom = getFullPath(redirectedFrom)
+  }
+  return Object.freeze(route)
+}
+
 function matchRoute (
   path: string,
   params: Object,

src/history/abstract.js

@@ -9,10 +9,14 @@ export class AbstractHistory extends History {
 
   constructor (router: VueRouter) {
     super(router)
-    this.stack = [this.current]
+    this.stack = []
     this.index = 0
   }
 
+  onInit () {
+    this.stack = [this.current]
+  }
+
   push (location: RawLocation) {
     super.transitionTo(location, route => {
       this.stack = this.stack.slice(0, this.index + 1).concat(route)

src/history/base.js

@@ -4,6 +4,7 @@ import type VueRouter from '../index'
 import { inBrowser } from '../util/dom'
 import { runQueue } from '../util/async'
 import { isSameRoute } from '../util/route'
+import { createRoute } from '../create-matcher'
 
 export class History {
   router: VueRouter;
@@ -16,13 +17,19 @@ export class History {
   go: Function;
   push: Function;
   replace: Function;
+  onInit: Function;
 
   constructor (router: VueRouter, base: ?string) {
     this.router = router
     this.base = normalizeBae(base)
-    this.current = router.match('/')
+    // start with a route object that stands for "nowhere"
+    this.current = createRoute(null, {
+      path: '__vue_router_init__'
+    })
     this.pending = null
-    this.transitionTo(this.getLocation())
+    this.transitionTo(this.getLocation(), route => {
+      this.onInit(route)
+    })
   }
 
   listen (cb: Function) {
@@ -53,7 +60,9 @@ export class History {
       // global before hooks
       this.router.beforeHooks,
       // activate guards
-      activated.map(m => m.beforeEnter)
+      activated.map(m => m.beforeEnter),
+      // async components
+      resolveAsyncComponents(activated)
     ).filter(_ => _)
 
     this.pending = route
@@ -123,18 +132,41 @@ function resolveQueue (
 }
 
 function extractLeaveGuards (matched: Array<RouteRecord>): Array<?Function> {
-  return Array.prototype.concat.apply([], matched.map(m => {
-    return Object.keys(m.components).map(key => {
-      const component = m.components[key]
-      const instance = m.instances[key] && m.instances[key].child
-      const guard = typeof component === 'function'
-        ? component.options.beforeRouteLeave
-        : (component && component.beforeRouteLeave)
-      if (guard) {
-        return function routeGuard () {
-          return guard.apply(instance, arguments)
-        }
+  return flatMapComponents(matched, (def, instance) => {
+    const guard = def && def.beforeRouteLeave
+    if (guard) {
+      return function routeGuard () {
+        return guard.apply(instance, arguments)
       }
-    })
-  }).reverse())
+    }
+  }).reverse()
+}
+
+function resolveAsyncComponents (matched: Array<RouteRecord>): Array<?Function> {
+  return flatMapComponents(matched, (def, _, match, key) => {
+    // if it's a function and doesn't have Vue options attached,
+    // assume it's an async component resolve function.
+    // we are not using Vue's default async resolving mechanism because
+    // we want to halt the navigation until the incoming component has been
+    // resolved.
+    if (typeof def === 'function' && !def.options) {
+      return (route, redirect, next) => def(resolvedDef => {
+        match.components[key] = resolvedDef
+        next()
+      })
+    }
+  })
+}
+
+function flatMapComponents (
+  matched: Array<RouteRecord>,
+  fn: Function
+): Array<?Function>  {
+  return Array.prototype.concat.apply([], matched.map(m => {
+    return Object.keys(m.components).map(key => fn(
+      m.components[key],
+      m.instances[key] && m.instances[key].child,
+      m, key
+    ))
+  }))
 }

src/history/hash.js

@@ -12,14 +12,17 @@ export class HashHistory extends History {
     if (fallback && this.checkFallback()) {
       return
     }
+    window.addEventListener('hashchange', () => {
+      this.onHashChange()
+    })
+  }
+
+  onInit () {
     ensureSlash()
     // possible redirect on start
     if (getHash() !== this.current.fullPath) {
       replaceHash(this.current.fullPath)
     }
-    window.addEventListener('hashchange', () => {
-      this.onHashChange()
-    })
   }
 
   checkFallback () {

src/history/html5.js

@@ -19,14 +19,7 @@ export class HTML5History extends History {
   constructor (router: VueRouter, base: ?string) {
     super(router, base)
 
-    // possible redirect on start
-    const url = cleanPath(this.base + this.current.fullPath)
-    if (this.getLocation() !== url) {
-      replaceState(url)
-    }
-
     const expectScroll = router.options.scrollBehavior
-
     window.addEventListener('popstate', e => {
       _key = e.state && e.state.key
       const current = this.current
@@ -44,6 +37,14 @@ export class HTML5History extends History {
     }
   }
 
+  onInit () {
+    // possible redirect on start
+    const url = cleanPath(this.base + this.current.fullPath)
+    if (this.getLocation() !== url) {
+      replaceState(url)
+    }
+  }
+
   go (n: number) {
     window.history.go(n)
   }

src/util/location.js

@@ -14,8 +14,9 @@ export function normalizeLocation (
   }
 
   const parsedPath = parsePath(next.path || '')
+  const basePath = (current && current.path) || '/'
   const path = parsedPath.path
-    ? resolvePath(parsedPath.path, current && current.path, append)
+    ? resolvePath(parsedPath.path, basePath, append)
     : (current && current.path) || '/'
   const query = resolveQuery(parsedPath.query, next.query)
   let hash = next.hash || parsedPath.hash

src/util/path.js

@@ -2,7 +2,7 @@
 
 export function resolvePath (
   relative: string,
-  base: string = '/',
+  base: string,
   append?: boolean
 ): string {
   if (relative.charAt(0) === '/') {