Vue3 源码解析之旅——Vue Router 深入解析（二）

2023-11-11 19:59:27

导语

Vue Router 是 Vue.js 官方推荐的路由管理工具，它提供了灵活的路由配置和丰富的 API，可以帮助开发者轻松构建单页面应用。在本文中，我们将继续对 Vue Router 源码进行深入解析，重点关注以下几个方面：

app.use(router) 的实现
组合式 API 的使用
RouterView 和 RouterLink 的实现
源码中的一些 issues

一、app.use(router) 的实现

app.use(router) 是在 Vue 实例中安装 Vue Router 的关键方法。它的实现位于 packages/vue-router/src/install.js 文件中。

export function install(app, router, options) {
  // ...

  // 把createRouter方法挂载到app上
  app.config.globalProperties.$router = router

  // ...
}

从代码中可以看出，app.use(router) 方法主要做了以下几件事：

把 Vue Router 实例挂载到 Vue 实例的 config.globalProperties 属性上，这样就可以通过 this.$router 访问 Vue Router 实例。
把 Vue Router 实例挂载到 Vue 实例的 provide 属性上，这样就可以通过 inject('router') 访问 Vue Router 实例。
调用 router.init(app) 方法，初始化 Vue Router 实例。

二、组合式 API 的使用

组合式 API 是 Vue 3 中引入的一种新的 API，它允许开发者以更加灵活的方式管理组件的状态。在 Vue Router 中，组合式 API 主要用于管理路由状态。

组合式 API 的使用主要体现在以下几个方面：

使用 useRouter() 函数获取 Vue Router 实例。
使用 useRoute() 函数获取当前路由信息。
使用 useRouterGuard() 函数创建路由守卫。
使用 useRouteMeta() 函数获取当前路由的元信息。

三、RouterView 和 RouterLink 的实现

RouterView 和 RouterLink 是 Vue Router 提供的两个基础组件，它们分别用于渲染路由组件和创建路由链接。

1. RouterView

RouterView 的实现位于 packages/vue-router/src/components/RouterView.js 文件中。

export const RouterView = {
  name: 'RouterView',

  // ...

  render() {
    // 获取当前路由的组件
    const Component = currentRoute.value.component

    // ...

    // 渲染组件
    return <Component />
  }
}

从代码中可以看出，RouterView 主要做了以下几件事：

获取当前路由的组件。
创建一个组件实例。
渲染组件实例。

2. RouterLink

RouterLink 的实现位于 packages/vue-router/src/components/RouterLink.js 文件中。

export const RouterLink = {
  name: 'RouterLink',

  // ...

  render() {
    // 获取当前路由的路径
    const path = to.value

    // ...

    // 创建一个链接
    return <a href={path}>{children}</a>
  }
}

从代码中可以看出，RouterLink 主要做了以下几件事：

获取当前路由的路径。
创建一个链接。
渲染链接。

四、源码中的一些 issues

在 Vue Router 的源码中，有一些 issues 值得我们关注。

1. 路由组件的命名问题

在 Vue Router 的源码中，路由组件的命名存在一些问题。例如，在 packages/vue-router/src/components/RouterView.js 文件中，路由组件的命名是 RouterView，而在 packages/vue-router/src/components/RouterLink.js 文件中，路由组件的命名是 RouterLink。这种命名方式很容易导致混淆。

2. RouterView 中的 currentRoute.value.component 问题

在 RouterView 的 render 函数中，有一行代码是 const Component = currentRoute.value.component。这行代码的意思是获取当前路由的组件。然而，在某些情况下，currentRoute.value.component 可能会是 undefined。这会导致 RouterView 无法正常渲染组件。