Vue Router 源码揭秘：从入门到精通

2024-02-18 02:33:42







Vue Router 是 Vue.js 的官方路由管理库，它可以帮助你轻松地在单页面应用中管理路由。Vue Router 是一个非常强大的工具，它提供了很多特性，比如嵌套路由、重定向、导航守卫等。但是，如果你想更深入地了解 Vue Router，那么你可能需要去看一看它的源码。

Vue Router 的源码并不难理解，但它确实需要一些时间来阅读和消化。在本文中，我将带你一步一步地解读 Vue Router 的源码，从 VueRouter 的注册安装、router对象的构造、路由的匹配再到路由的切换等流程，完整分析 VueRouter 的实现原理。

## VueRouter 的注册安装

Vue Router 的注册安装非常简单，你只需要在 Vue 实例中调用 `Vue.use()` 方法，然后传入 Vue Router 实例即可。例如：

```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

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

Router对象的构造

当 Vue Router 实例被创建时，它会创建一个 router 对象。router 对象是 Vue Router 的核心，它负责管理路由、匹配路由、切换路由等操作。router 对象的构造函数如下：

function Router (options = {}) {
  this.app = null
  this._options = options
  this._base = normalizeURL(options.base || '/')
  this._beforeEachHooks = []
  this._afterEachHooks = []
  this._resolveQueue = []
  this._negativeCache = {}

  if (typeof window !== 'undefined') {
    this.location = window.location
  } else {
    // server
    this.location = {}
    this._history = new History()
  }

  this._setupListeners()
}