// 1. 定義相關(guān)路由視圖組件
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
// 2. 定義相關(guān)路由路徑等路由配置
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]
// 3. 通過 createRouter 方法傳入路由配置參數(shù)進(jìn)行路由對象創(chuàng)建
const router = VueRouter.createRouter({
  // 4. 選擇路由能力的模式進(jìn)行初始化創(chuàng)建
  history: VueRouter.createWebHashHistory(),
  routes,
})
// 5. 調(diào)用 Vue.js 對象的 use 方法來對 VueRouter 路由對象進(jìn)行初始化安裝處理
const app = Vue.createApp({})
app.use(router)
app.mount('#app')

<router-view class="view left-sidebar" name="LeftSidebar"></router-view>
<router-view class="view main-content">
  <router-link to="/" reaplace>Home</router-link>
</router-view>
<router-view class="view right-sidebar" name="RightSidebar"></router-view>

export default {
  methods: {
    redirectHome() {
      this.$router.replace('/')
    },
    goToAbout() {
      this.$router.push('/about')
    },
  },
}

// vuejs:router/packages/router/src/router.ts
export function createRouter(options: RouterOptions): Router {
  const matcher = createRouterMatcher(options.routes, options)
  const parseQuery = options.parseQuery || originalParseQuery
  const stringifyQuery = options.stringifyQuery || originalStringifyQuery
  const routerHistory = options.history
  const beforeGuards = useCallbacks<NavigationGuardWithThis<undefined>>()
  const beforeResolveGuards = useCallbacks<NavigationGuardWithThis<undefined>>()
  const afterGuards = useCallbacks<NavigationHookAfter>()
  const currentRoute = shallowRef<RouteLocationNormalizedLoaded>(START_LOCATION_NORMALIZED)
  let pendingLocation: RouteLocation = START_LOCATION_NORMALIZED
  function addRoute(parentOrRoute: RouteRecordName | RouteRecordRaw, route?: RouteRecordRaw) {
    // ··· ···
  }
  function removeRoute(name: RouteRecordName) {
    // ··· ···
  }
  function getRoutes() {
    // ··· ···
  }
  function hasRoute(name: RouteRecordName): boolean {
    // ··· ···
  }
  function resolve(rawLocation: Readonly<RouteLocationRaw>, currentLocation?: RouteLocationNormalizedLoaded): RouteLocation & { href: string } {
    // ··· ···
  }
  function push(to: RouteLocationRaw) {
    // ··· ···
  }
  function replace(to: RouteLocationRaw) {
    // ··· ···
  }
  let readyHandlers = useCallbacks<OnReadyCallback>()
  let errorHandlers = useCallbacks<_ErrorHandler>()
  function isReady(): Promise<void> {
    // ··· ···
  }
  const go = (delta: number) => routerHistory.go(delta)
  const router: Router = {
    // ··· ···
  }
  return router
}

// vuejs:router/packages/router/src/router.ts
export interface Router {
  // 當(dāng)前路由
  readonly currentRoute: Ref<RouteLocationNormalizedLoaded>
	// VueRouter 路由配置項
  readonly options: RouterOptions
  // 是否監(jiān)聽中
  listening: boolean
  // 動態(tài)增加路由項
  addRoute(parentName: RouteRecordName, route: RouteRecordRaw): () => void
  addRoute(route: RouteRecordRaw): () => void
  // 動態(tài)刪除路由項
  removeRoute(name: RouteRecordName): void
  // 根據(jù)路由配置的 name 判斷是否有該路由
  hasRoute(name: RouteRecordName): boolean
  // 獲取當(dāng)前所有路由數(shù)據(jù)
  getRoutes(): RouteRecord[]
  // 當(dāng)前網(wǎng)頁的標(biāo)準(zhǔn)路由 URL 地址
  resolve(
    to: RouteLocationRaw,
    currentLocation?: RouteLocationNormalizedLoaded
  ): RouteLocation & { href: string }
  // 路由導(dǎo)航跳轉(zhuǎn)操作方法
  push(to: RouteLocationRaw): Promise<NavigationFailure | void | undefined>
  replace(to: RouteLocationRaw): Promise<NavigationFailure | void | undefined>
  back(): ReturnType<Router['go']>
  forward(): ReturnType<Router['go']>
  go(delta: number): void
  // 全局守衛(wèi)
  beforeEach(guard: NavigationGuardWithThis<undefined>): () => void
  beforeResolve(guard: NavigationGuardWithThis<undefined>): () => void
  afterEach(guard: NavigationHookAfter): () => void
  // 路由錯誤回調(diào)處理
  onError(handler: _ErrorHandler): () => void
  // 路由是否已經(jīng)完成初始化導(dǎo)航
  isReady(): Promise<void>
  // 2.x 版本的 Vue.js 引入 VueRouter 時候自動調(diào)用
  install(app: App): void
}

// vuejs:router/packages/router/src/matcher/index.ts
export function createRouterMatcher(
    routes: Readonly<RouteRecordRaw[]>,
    globalOptions: PathParserOptions
): RouterMatcher {
  const matchers: RouteRecordMatcher[] = []
  const matcherMap = new Map<RouteRecordName, RouteRecordMatcher>()
  globalOptions = mergeOptions(
      { strict: false, end: true, sensitive: false } as PathParserOptions,
      globalOptions
  )
  function getRecordMatcher(name: RouteRecordName) {
    return matcherMap.get(name)
  }
  function addRoute(
      record: RouteRecordRaw,
      parent?: RouteRecordMatcher,
      originalRecord?: RouteRecordMatcher
  ) {
    // ··· ···
  }
  function removeRoute(matcherRef: RouteRecordName | RouteRecordMatcher) {
    // ··· ···
  }
  function getRoutes() {
    // ··· ···
  }
  function resolve(location: Readonly<MatcherLocationRaw>, currentLocation: Readonly<MatcherLocation>): MatcherLocation {
    // ··· ···
  }
  routes.forEach(route => addRoute(route))
  return { addRoute, resolve, removeRoute, getRoutes, getRecordMatcher }
}

// vuejs:router/packages/router/src/utils/callbacks.ts
export function useCallbacks<T>() {
  let handlers: T[] = []
  function add(handler: T): () => void {
    handlers.push(handler)
    return () => {
      const i = handlers.indexOf(handler)
      if (i > -1) handlers.splice(i, 1)
    }
  }
  function reset() {
    handlers = []
  }
  return {
    add,
    list: () => handlers,
    reset,
  }
}

// vuejs:router/packages/router/src/router.ts
import { useCallbacks } from './utils/callbacks'
export function createRouter(options: RouterOptions): Router {
  const beforeGuards = useCallbacks<NavigationGuardWithThis<undefined>>()
  const beforeResolveGuards = useCallbacks<NavigationGuardWithThis<undefined>>()
  const afterGuards = useCallbacks<NavigationHookAfter>()
  // ··· ···
  const router: Router = {
    // ··· ···
    beforeEach: beforeGuards.add,
    beforeResolve: beforeResolveGuards.add,
    afterEach: afterGuards.add,
    // ··· ···
  }
  return router
}

// vuejs:router/packages/router/src/router.ts
export function createRouter(options: RouterOptions): Router {
	// ··· ···
  // 添加路由項 - 兼容處理參數(shù)后使用 addRoute 進(jìn)行添加路由項
  function addRoute(
    parentOrRoute: RouteRecordName | RouteRecordRaw,
    route?: RouteRecordRaw
  ) {
    let parent: Parameters<(typeof matcher)['addRoute']>[1] | undefined
    let record: RouteRecordRaw
    if (isRouteName(parentOrRoute)) {
      parent = matcher.getRecordMatcher(parentOrRoute)
      record = route!
    } else {
      record = parentOrRoute
    }
    return matcher.addRoute(record, parent)
  }
  // 刪除路由項 - 根據(jù)路由名 name 調(diào)用 getRecordMatcher 獲取路由項，如果找到記錄則調(diào)用 removeRoute 刪除該路由項
  function removeRoute(name: RouteRecordName) {
    const recordMatcher = matcher.getRecordMatcher(name)
    if (recordMatcher) {
      matcher.removeRoute(recordMatcher)
    }
  }
  // 獲取當(dāng)前所有路由項 - 
  function getRoutes() {
    return matcher.getRoutes().map(routeMatcher => routeMatcher.record)
  }
  // 是否含有路由 - 根據(jù)路由名 name 調(diào)用 getRecordMatcher 獲取路由項
  function hasRoute(name: RouteRecordName): boolean {
    return !!matcher.getRecordMatcher(name)
  }
  const router: Router = {
    addRoute,
    removeRoute,
    hasRoute,
    getRoutes,
  }
  return router
}

// vuejs:router/packages/router/src/router.ts
export function createRouter(options: RouterOptions): Router {
  const routerHistory = options.history
  function push(to: RouteLocationRaw) {
    return pushWithRedirect(to)
  }
  function replace(to: RouteLocationRaw) {
    return push(assign(locationAsObject(to), { replace: true }))
  }
  const go = (delta: number) => routerHistory.go(delta)
  const router: Router = {
    push,
    replace,
    go,
    back: () => go(-1),
    forward: () => go(1),
  }
  return router
}

// vuejs:router/packages/router/src/router.ts
function pushWithRedirect(
  to: RouteLocationRaw | RouteLocation,
  redirectedFrom?: RouteLocation
): Promise<NavigationFailure | void | undefined> {
  // 定義相關(guān)的路由變量屬性
  const targetLocation: RouteLocation = (pendingLocation = resolve(to))
  const from = currentRoute.value
  const data: HistoryState | undefined = (to as RouteLocationOptions).state
  const force: boolean | undefined = (to as RouteLocationOptions).force
  const replace = (to as RouteLocationOptions).replace === true
  // 調(diào)用 handleRedirectRecord 判斷目標(biāo)跳轉(zhuǎn)是否需要重定向 -- 就是這個 to 要跳轉(zhuǎn)的路由的 redirect 屬性是否為 true
  const shouldRedirect = handleRedirectRecord(targetLocation)
  // 若需要重定向則遞歸調(diào)用 pushWithRedirect 方法
  if (shouldRedirect)
    return pushWithRedirect(
      assign(locationAsObject(shouldRedirect), {
        state:
          typeof shouldRedirect === 'object'
          ? assign({}, data, shouldRedirect.state)
          : data,
        force,
        replace,
      }),
      redirectedFrom || targetLocation
    )
	// 后續(xù)邏輯是非重定向的路由
  const toLocation = targetLocation as RouteLocationNormalized
  toLocation.redirectedFrom = redirectedFrom
  let failure: NavigationFailure | void | undefined
  // 不設(shè)置強(qiáng)制跳轉(zhuǎn)并且目標(biāo)跳轉(zhuǎn)路由地址與當(dāng)前路由地址一樣的情況下定義相關(guān)的跳轉(zhuǎn)異常以及頁面的滾動，后續(xù)使用 Promise.resolve 處理異常
  if (!force && isSameRouteLocation(stringifyQuery, from, targetLocation)) {
    failure = createRouterError<NavigationFailure>(
      ErrorTypes.NAVIGATION_DUPLICATED,
      { to: toLocation, from }
    )
    handleScroll(from, from, true, false)
  }
  // 判斷前面的執(zhí)行邏輯是否存在跳轉(zhuǎn)異?；蛘咤e誤，如果沒有跳轉(zhuǎn)異常錯誤則執(zhí)行 navigate 這個Promise方法
  return (failure ? Promise.resolve(failure) : navigate(toLocation, from))
    .catch((error: NavigationFailure | NavigationRedirectError) => {
      // 處理跳轉(zhuǎn)中出現(xiàn)異常后捕獲相關(guān)的錯誤并對不同錯誤進(jìn)行處理
      isNavigationFailure(error)
        ? isNavigationFailure(error, ErrorTypes.NAVIGATION_GUARD_REDIRECT) ? error : markAsReady(error)
        : triggerError(error, toLocation, from) 
    }).then((failure: NavigationFailure | NavigationRedirectError | void) => {
      // 跳轉(zhuǎn)調(diào)用 navigate 后的處理
      if (failure) {
        // 處理跳轉(zhuǎn)和執(zhí)行navigate過程當(dāng)中的錯誤異常
      } else {
        failure = finalizeNavigation(
          toLocation as RouteLocationNormalizedLoaded,
          from,
          true,
          replace,
          data
        )
      }
      triggerAfterEach(toLocation as RouteLocationNormalizedLoaded, from, failure)
      return failure
    })
}

// vuejs:router/packages/router/src/router.ts
function navigate(
  to: RouteLocationNormalized,
  from: RouteLocationNormalizedLoaded
): Promise<any> {
  let guards: Lazy<any>[]
  // extractChangingRecords 方法會根據(jù)(to/目標(biāo)跳轉(zhuǎn)路由)和(from/離開的路由)到路由匹配器matcher里匹配對應(yīng)的路由項并且將結(jié)果存到3個數(shù)組中
  //		leavingRecords：當(dāng)前即將離開的路由
  //		updatingRecords：要更新的路由
  //		enteringRecords：要跳轉(zhuǎn)的目標(biāo)路由
  const [leavingRecords, updatingRecords, enteringRecords] = extractChangingRecords(to, from)
  // extractComponentsGuards 方法用于提取不同的路由鉤子，第二個參數(shù)可傳值：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
  guards = extractComponentsGuards(
    leavingRecords.reverse(), // 這里因為Vue組件銷毀順序是從子到父，因此使用reverse反轉(zhuǎn)數(shù)組保證子路由鉤子順序在前
    'beforeRouteLeave',
    to,
    from
  )
  // 將失活組件的 onBeforeRouteLeave 導(dǎo)航守衛(wèi)都提取并且添加到 guards 里
  for (const record of leavingRecords) {
    record.leaveGuards.forEach(guard => {
      guards.push(guardToPromiseFn(guard, to, from))
    })
  }
  // 檢查當(dāng)前正在處理的目標(biāo)跳轉(zhuǎn)路由和 to 是否相同路由，如果不是的話則拋除 Promise 異常
  const canceledNavigationCheck = checkCanceledNavigationAndReject.bind(null, to, from)
  guards.push(canceledNavigationCheck)
  return (
    runGuardQueue(guards) // 作為啟動 Promise 開始執(zhí)行失活組件的 beforeRouteLeave 鉤子
    .then(() => {
      // 執(zhí)行全局 beforeEach 鉤子
      guards = []
      for (const guard of beforeGuards.list()) {
        guards.push(guardToPromiseFn(guard, to, from))
      }
      guards.push(canceledNavigationCheck)
      return runGuardQueue(guards)
    })
    .then(() => {
      // 執(zhí)行重用組件的 beforeRouteUpdate 鉤子
      guards = extractComponentsGuards(
        updatingRecords,
        'beforeRouteUpdate',
        to,
        from
      )
      for (const record of updatingRecords) {
        record.updateGuards.forEach(guard => {
          guards.push(guardToPromiseFn(guard, to, from))
        })
      }
      guards.push(canceledNavigationCheck)
      return runGuardQueue(guards)
    })
    .then(() => {
      // 執(zhí)行全局 beforeEnter 鉤子
      guards = []
      for (const record of to.matched) {
        if (record.beforeEnter && !from.matched.includes(record)) {
          if (isArray(record.beforeEnter)) {
            for (const beforeEnter of record.beforeEnter)
              guards.push(guardToPromiseFn(beforeEnter, to, from))
          } else {
            guards.push(guardToPromiseFn(record.beforeEnter, to, from))
          }
        }
      }
      guards.push(canceledNavigationCheck)
      return runGuardQueue(guards)
    })
    .then(() => {
      // 清除已經(jīng)存在的 enterCallbacks, 因為這些已經(jīng)在 extractComponentsGuards 里面添加
      to.matched.forEach(record => (record.enterCallbacks = {}))
      // 執(zhí)行被激活組件的 beforeRouteEnter 鉤子
      guards = extractComponentsGuards(
        enteringRecords,
        'beforeRouteEnter',
        to,
        from
      )
      guards.push(canceledNavigationCheck)
      return runGuardQueue(guards)
    })
    .then(() => {
      // 執(zhí)行全局 beforeResolve 鉤子
      guards = []
      for (const guard of beforeResolveGuards.list()) {
        guards.push(guardToPromiseFn(guard, to, from))
      }
      guards.push(canceledNavigationCheck)
      return runGuardQueue(guards)
    })
    .catch(err =>
      // 處理在過程當(dāng)中拋除的異常或者取消導(dǎo)航跳轉(zhuǎn)操作
      isNavigationFailure(err, ErrorTypes.NAVIGATION_CANCELLED)
      ? err
      : Promise.reject(err)
          )
  )
}

// vuejs:router/packages/router/src/router.ts
function finalizeNavigation(
  toLocation: RouteLocationNormalizedLoaded,
  from: RouteLocationNormalizedLoaded,
  isPush: boolean,
  replace?: boolean,
  data?: HistoryState
): NavigationFailure | void {
  // 檢查是否需要取消目標(biāo)路由的跳轉(zhuǎn) -- 判斷目標(biāo)跳轉(zhuǎn)的路由和當(dāng)前處理的跳轉(zhuǎn)路由是否不同，不同則取消路由跳轉(zhuǎn)
  const error = checkCanceledNavigation(toLocation, from)
  if (error) return error
  const isFirstNavigation = from === START_LOCATION_NORMALIZED
  const state = !isBrowser ? {} : history.state
  if (isPush) {
    // 處理路由跳轉(zhuǎn)，判斷根據(jù) replace 參數(shù)判斷使用 replace 還是 push 的跳轉(zhuǎn)形式
    if (replace || isFirstNavigation)
      routerHistory.replace(
        toLocation.fullPath,
        assign({ scroll: isFirstNavigation && state && state.scroll, }, data)
      )
    else routerHistory.push(toLocation.fullPath, data)
  }
  currentRoute.value = toLocation
  // 處理設(shè)置頁面的滾動
  handleScroll(toLocation, from, isPush, isFirstNavigation)
  markAsReady()
}

// vuejs:router/packages/router/src/router.ts
import { useCallbacks } from './utils/callbacks'
export function createRouter(options: RouterOptions): Router {
  const beforeGuards = useCallbacks<NavigationGuardWithThis<undefined>>()
  const beforeResolveGuards = useCallbacks<NavigationGuardWithThis<undefined>>()
  const afterGuards = useCallbacks<NavigationHookAfter>()
  let errorHandlers = useCallbacks<_ErrorHandler>()
  // ··· ···
  const router: Router = {
    // ··· ···
    // 拋出相關(guān)導(dǎo)航守衛(wèi)或鉤子對應(yīng)的新增訂閱回調(diào)事件
    beforeEach: beforeGuards.add,
    beforeResolve: beforeResolveGuards.add,
    afterEach: afterGuards.add,
    onError: errorHandlers.add,
    // ··· ···
  }
  return router
}

const app = Vue.createApp({})
app.use(router)

// vuejs:router/packages/router/src/router.ts
install(app: App) {
  const router = this
  // 注冊 VueRouter 的路由視圖和鏈接組件為 Vue 全局組件
  app.component('RouterLink', RouterLink)
  app.component('RouterView', RouterView)
  // 在全局 Vue this 對象上掛載 $router 屬性為路由對象
  app.config.globalProperties.$router = router
  Object.defineProperty(app.config.globalProperties, '$route', {
    enumerable: true,
    get: () => unref(currentRoute),
  })
  // 判斷瀏覽器環(huán)境并且還沒執(zhí)行初始化路由跳轉(zhuǎn)時候先進(jìn)行一次 VueRouter 的 push 路由跳轉(zhuǎn)
  if (
    isBrowser &&
    !started &&
    currentRoute.value === START_LOCATION_NORMALIZED
  ) {
    started = true
    push(routerHistory.location).catch(err => {
      if (__DEV__) warn('Unexpected error when starting the router:', err)
    })
  }
  // 使用 computed 計算屬性來創(chuàng)建一個記錄當(dāng)前已經(jīng)被激活過的路由的對象 reactiveRoute
  const reactiveRoute = {} as {
    [k in keyof RouteLocationNormalizedLoaded]: ComputedRef<
     RouteLocationNormalizedLoaded[k]
     >
  }
  for (const key in START_LOCATION_NORMALIZED) {
    reactiveRoute[key] = computed(() => currentRoute.value[key])
  }
  // 全局注入相關(guān)的一些路由相關(guān)的變量
  app.provide(routerKey, router)
  app.provide(routeLocationKey, reactive(reactiveRoute))
  app.provide(routerViewLocationKey, currentRoute)
  // 重寫覆蓋 Vue 項目的卸載鉤子函數(shù) - 執(zhí)行相關(guān)屬性的卸載并且調(diào)用原本 Vue.js 的卸載 unmount 事件
  const unmountApp = app.unmount
  installedApps.add(app)
  app.unmount = function () {
    installedApps.delete(app)
    if (installedApps.size < 1) {
      pendingLocation = START_LOCATION_NORMALIZED
      removeHistoryListener && removeHistoryListener()
      removeHistoryListener = null
      currentRoute.value = START_LOCATION_NORMALIZED
      started = false
      ready = false
    }
    unmountApp() // 執(zhí)行原本 Vue 項目當(dāng)中設(shè)置的 unmount 鉤子函數(shù)
  }
}