const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({ routes })

const app = new Vue({
  router
}).$mount('#app')

// https://github.com/vuejs/vue-router/blob/dev/src/index.js#L18
export default class VueRouter {
    constructor (options: RouterOptions = {}) {
        this.app = null
        this.apps = []
        // 我们传入的参数
        this.options = options
        // beforeEach 导航守卫集合
        this.beforeHooks = []
        // beforeResolve 导航守卫集合
        this.resolveHooks = []
        // afterEach 导航守卫集合
        this.afterHooks = []
        // 根据当前传入的路由创建匹配对象
        this.matcher = createMatcher(options.routes || [], this)
        // 确定当前使用的路由模式 [history | hash | abstract]
        let mode = options.mode || 'hash'
        // 判断当前路由模式是否要自动回退，history模式下，如果当前浏览器不支持 pushState 并且配置了 fallback 为 true 的情况下，模式自动降级为 hash
        this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false
        if (this.fallback) {
          mode = 'hash'
        }
        if (!inBrowser) {
          mode = 'abstract'
        }
        this.mode = mode
        
        switch (mode) {
          case 'history':
            this.history = new HTML5History(this, options.base)
            break
          case 'hash':
            this.history = new HashHistory(this, options.base, this.fallback)
            break
          case 'abstract':
            this.history = new AbstractHistory(this, options.base)
            break
          default:
            if (process.env.NODE_ENV !== 'production') {
              assert(false, `invalid mode: ${mode}`)
            }
        }
    }
    ....(to be continued
}

this.matcher = createMatcher(options.routes || [], this)

// https://github.com/vuejs/vue-router/blob/a8fe4fcecf59b3a25d7dd8796643870f85069e2f/src/create-matcher.js#L16
export function createMatcher(
  routes: Array < RouteConfig > ,
  router: VueRouter
): Matcher {
  ...
  return {
    match,
    addRoutes
  }
}

// 根据用户传入的 routes 参数，将其分成三部分：
// pathList: 存储所有的 path
// pathMap: 存储所有 path -> RouteRecord 的映射
// nameMap: 存储所有 name -> RouteRecord 的映射
const {pathList, pathMap, nameMap } = createRouteMap(routes)

function addRoutes(routes) {
    // 将当前传入的 routes 添加到之前的映射中
    createRouteMap(routes, pathList, pathMap, nameMap)
}

const record: RouteRecord = {
    // 格式化后的路径
    path: normalizedPath,
    // 使用 path-to-regexp 对 path 进行解析后的值
    regex: compileRouteRegex(normalizedPath, pathToRegexpOptions),
    components: route.components || { default: route.component },
    instances: {},
    name,
    parent,
    matchAs,
    redirect: route.redirect,
    beforeEnter: route.beforeEnter,
    meta: route.meta || {},
    props:
      route.props == null
        ? {}
        : route.components
          ? route.props
          : { default: route.props }
}

function match(
  raw: RawLocation,
  currentRoute ? : Route,
  redirectedFrom ? : Location
): Route {
  const location = normalizeLocation(raw, currentRoute, false, router)
  const {
    name
  } = location
  // 有 name 的情况
  if (name) {
    // 根据 name 获取当前路由信息
    const record = nameMap[name]
    if (process.env.NODE_ENV !== 'production') {
      warn(record, `Route with name '${name}' does not exist`)
    }
    if (!record) return _createRoute(null, location)
    const paramNames = record.regex.keys
      .filter(key => !key.optional)
      .map(key => key.name)

    if (typeof location.params !== 'object') {
      location.params = {}
    }

    if (currentRoute && typeof currentRoute.params === 'object') {
      // 遍历当前路由信息，更新 location 的信息
      for (const key in currentRoute.params) {
        if (!(key in location.params) && paramNames.indexOf(key) > -1) {
          location.params[key] = currentRoute.params[key]
        }
      }
    }
    location.path = fillParams(record.path, location.params, `named route "${name}"`)
    return _createRoute(record, location, redirectedFrom)
  // 有 path 的情况
  } else if (location.path) {
    location.params = {}
    for (let i = 0; i < pathList.length; i++) {
      const path = pathList[i]
      const record = pathMap[path]
      // 根据当前 path 遍历所有路由信息，获取匹配 record
      if (matchRoute(record.regex, location.path, location.params)) {
        return _createRoute(record, location, redirectedFrom)
      }
    }
  }
  // no match
  return _createRoute(null, location)
}

// https://github.com/vuejs/vue-router/blob/a8fe4fcecf/src/create-matcher.js#L153
function _createRoute(
  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)
  }
  return createRoute(record, location, redirectedFrom, router)
}

// https://github.com/vuejs/vue-router/blob/a8fe4fcecf59b3a25d7dd8796643870f85069e2f/src/util/route.js#L8
export function createRoute (
  record: ?RouteRecord,
  location: Location,
  redirectedFrom?: ?Location,
  router?: VueRouter
): Route {
  const stringifyQuery = router && router.options.stringifyQuery

  let query: any = location.query || {}
  try {
    query = clone(query)
  } catch (e) {}

  const route: Route = {
    name: location.name || (record && record.name),
    meta: (record && record.meta) || {},
    path: location.path || '/',
    hash: location.hash || '',
    query,
    params: location.params || {},
    fullPath: getFullPath(location, stringifyQuery),
    matched: record ? formatMatch(record) : []
  }
  if (redirectedFrom) {
    route.redirectedFrom = getFullPath(redirectedFrom, stringifyQuery)
  }
  return Object.freeze(route)
}