关于vue-router:vuerouter源码一routerinstall解析

前言

【vue-router 源码】系列文章将带你从 0 开始理解 vue-router 的具体实现。该系列文章源码参考 vue-router v4.0.15。
源码地址：https://github.com/vuejs/router
浏览该文章的前提是你最好理解 vue-router 的根本应用，如果你没有应用过的话，可通过 vue-router 官网学习下。

该篇文章首先介绍 router.install 的过程。

vue-router 的应用

在介绍 router.install 之前，咱们先看下 vue3 中是如何应用 vue-router 的。

import {createApp} from 'vue'
import {createRouter} from 'vue-router'

const router = createRouter({...})
const app = createApp({})

app.use(router).mount('#app')

在执行 app.use 的过程中，会执行 router.install，并传入app 实例。那么 router.install 过程中产生了什么呢？接下来咱们一探到底。

router.install

router.install源码位于 createRouter 中，文件地位src/router.ts。

install(app: App) {
  const router = this
  app.component('RouterLink', RouterLink)
  app.component('RouterView', RouterView)

  app.config.globalProperties.$router = router
  Object.defineProperty(app.config.globalProperties, '$route', {
    enumerable: true,
    get: () => unref(currentRoute),
  })

  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)
    })
  }

  const reactiveRoute = {} as {[k in keyof RouteLocationNormalizedLoaded]: ComputedRef<
      RouteLocationNormalizedLoaded[k]
    >
  }
  for (const key in START_LOCATION_NORMALIZED) {reactiveRoute[key] = computed(() => currentRoute.value[key])
  }

  app.provide(routerKey, router)
  app.provide(routeLocationKey, reactive(reactiveRoute))
  app.provide(routerViewLocationKey, currentRoute)

  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()}

  if ((__DEV__ || __FEATURE_PROD_DEVTOOLS__) && isBrowser) {addDevtools(app, router, matcher)
  }
}

在 install 中，首先会注册 RouterLink 与RouterView两大组件。

app.component('RouterLink', RouterLink)
app.component('RouterView', RouterView)

而后会将以后的 router 对象赋值给 app.config.globalProperties.$router；同时拦挡了app.config.globalProperties.$route 的get操作，使 app.config.globalProperties.$route 始终获取 unref(currentRoute)，unref(currentRoute) 就是以后路由的一些信息，这里咱们先不深究，在后续章节中会具体介绍。这样一来，就能够在组件中通过 this.$router 获取 router，通过this.$route 来获取以后路由信息。

app.config.globalProperties.$router = router
Object.defineProperty(app.config.globalProperties, '$route', {
  enumerable: true,
  get: () => unref(currentRoute),
})

紧接着会依据浏览器 url 地址进行第一次跳转（如果是浏览器环境）。

if (
  isBrowser &&
  // 用于初始导航客户端，防止在多个利用中应用路由器时屡次 push
  !started &&
  currentRoute.value === START_LOCATION_NORMALIZED
) {
  started = true
  push(routerHistory.location).catch(err => {if (__DEV__) warn('Unexpected error when starting the router:', err)
  })
}

紧接着申明了一个 reactiveRoute 响应式对象，并遍历 START_LOCATION_NORMALIZED 对象，顺次将 START_LOCATION_NORMALIZED 中的 key 复制到 reactiveRoute 中，同时将 reactiveRoute 中key对应的值变成一个计算属性。

这里 START_LOCATION_NORMALIZED 是vue-router提供的初始路由地位，通过 START_LOCATION_NORMALIZED 构建一个响应式的路由reactiveRoute，不便对路由变动进行追踪。

const reactiveRoute = {} as {[k in keyof RouteLocationNormalizedLoaded]: ComputedRef<
    RouteLocationNormalizedLoaded[k]
  >
}
for (const key in START_LOCATION_NORMALIZED) {reactiveRoute[key] = computed(() => currentRoute.value[key])
}

app.provide(routerKey, router)
app.provide(routeLocationKey, reactive(reactiveRoute))
app.provide(routerViewLocationKey, currentRoute)

这里应用 provide 又将 router、currentRoute 注入到 app 实例中，你可能会疑难，在后面过程中曾经能够在组件中应用 this.$router、this.$route 获取到对应数据了，这里为什么又应用 provide 再次注入呢？这是因为在 setup 中式无法访问 this 的，这时通过 inject 就能够不便获取 router 及currentRoute。

最初会将 app 放入一个哈希表中，而后重写 app.unmount。当app 卸载时，首先从哈希表中删除 app，而后判断哈希表的大小是否小于 1，如果小于 1 代表曾经没有实例应用vue-router 了，那么这时就须要重置一些状态、移除一些监听。

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()}

总结

通过上述剖析，router.install次要做以下几件事：

1. 注册 RouterLink、RouterView 组件
2. 设置全局属性$router、$route
3. 依据地址栏进行首次的路由跳转
4. 向 app 中注入一些路由相干信息，如路由实例、响应式的以后路由信息对象
5. 拦挡 app.unmount 办法，在卸载之前重置一些属性、删除一些监听函数