vue-router 解析

「爱情、让人受尽委屈。」 2022-12-11 13:53 285阅读 0赞

本文将以最简单的方式解析`vue-router`实现原理，最全的实现过程请参考源码

## 核心步骤 ##

先简单回顾一下原生`vue-router`的使用方式

`router/index.js`

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '@/views/Home'
    
    // 1.引入插件
    Vue.use(VueRouter) // VueRouter 是一个插件
    
    const routes = [
      { 
        path: '/',
        name: 'Home',
        component: Home
      },
      { 
    	path: '/about',
    	name: 'About',
    	component: () => import(/*webpackChunkName: "about"*/'@/views/About')
      }
    ]
    
    // 创建路由实例
    const router = new VueRouter({ 
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router

`src/main.js`

import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    new Vue({ 
      router,	// 3.添加到根组件实例的配置项中
      render: h => h(App)
    }).$mount('#app')

`App.vue`

<template>
      <div id="app">
    	<div id="nav">
    	  
    	  <router-link to="/">Home</router-link>
    	  <router-link to="/about">About</router-link>
    	</div>
    	
    	<router-view></router-view>
      </div>
    </template>
    
    xxx

**思考**  
组件 `router-link` 和 `router-view` 能直接使用说明在 `VueRouter` 中全局注册了这两个组件

**VueRouter 内部做了什么事？**

1.  实现并声明了两个全局组件 `router-link` 和 `router-view`
2.  实现了`install` 方法(Vue插件必须拥有的一个方法)
3.  使每个路由组件中可以通过`this.$router`访问路由信息

`router-view`实现原理:

1.  利用 Vue 的响应式
2.  监听路由变化
3.  路由变化后通过 `routes映射表`，重新 `render`

--------------------

## 手撸 vue-router ##

再次说明，本文只是用最简单的实现方式解析 `vue-router` 的实现原理，因此会使用哈希路由以及依赖`Vue.utils`的数据响应式绑定工具，边缘条件将不作处理

`router/index.js`

import Vue from 'vue'
    // import VueRouter from 'vue-router'
    import VueRouter from '@/myVueRouter'
    import Home from '../views/Home.vue'
    
    // 注意这个地方
    // VueRouter 的执行是要比 new Vue({xxx}) 要早的
    Vue.use(VueRouter)
    
    const routes = [
      { 
        path: '/',
        name: 'Home',
        component: Home
      },
      { 
        path: '/about',
        name: 'About',
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      }
    ]
    
    const router = new VueRouter({ 
      mode: 'hash',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router

`src/main.js`

import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    new Vue({ 
      // 注意这个地方
      router,	// 3.添加到根组件实例的配置项中
      render: h => h(App)
    }).$mount('#app')

`myVueRouter/index.js`

// 实现功能
    // 1.插件
    // 2.实现两个全局组件
    
    // Vue插件：可以写成函数或者一个对象
    // 但必须有一个 install方法 供 Vue.use() 调用
    
    let Vue
    class VueRouter { 
      constructor (options) { 
    	// 在 new VueRouter() 的时候传入了以下参数
    	// { 
    	// mode: 'hash',
    	// base: process.env.BASE_URL,
    	// routes
    	// }
    	// 在此 demo 中只处理 routes
    	this.$options = options
    
        // 把 current 作为响应式数据
        // 将来发生变化时，view-router 的 render 函数能够再次执行
        // 这里使用 Vue 的内部工具定义的响应式函数来实现响应式
        // 只要 this.current 发生变化，依赖其的函数都会被重新执行
        const initial = window.location.hash.slice('#') || '/'
        Vue.util.defineReactive(this, 'current', initial)
    
    	// 监听 hash 变化
    	window.addEventListener('hashchange', () => { 
    	  this.current = window.location.hash.slice(1) // 取出 # 后面的地址
    	})
      }
    }
    
    // 参数1是 Vue.use 时传入的
    VueRouter.install = function (_Vue) { 
      Vue = _Vue
    
      // 1.挂载 $router 属性
      // 使一般的组件内可以通过 this.$router 访问路由实例
      // 这个 路由实例$router 是在路由配置的时候实例化的
      // router/index.js 中的 const router = new VueRouter({xxx})
      // 通过全局混入的方式挂载路由实例
      Vue.mixin({ 
    	beforeCreate() { 
    	  // 此处的 this 指向组件实例
    	  // 在 new Vue({}) 的时候会将路由实例挂载在 this.$options 上
    	  if (this.$options.router) { 
    		// 因为在 main.js 中给根实例挂载了 router
    		// 所以通过 this.$options.router 来判断当前实例是不是根实例
    		// 然后将路由实例挂载在全局的 Vue 的原型链上
    		// 这样做以后每个组件实例都能通过原型链访问到路由实例
    		Vue.prototype.$router = this.$options.router
    	  }
    	}
      })
    
      // 注册两个全局组件 router-link 和 router-view
      Vue.component('router-link', { 
    	props: { 
    	  to: {  // 按照 router-link 的写法，跳转地址是赋予到属性 to 上的
    		type: String,
    		required: true
    	  }
    	},
    	render (h) { 
    	  // <a href="to">xxx</a>
          /* * h函数的3个参数 * 1.渲染DOM的标签类型 * 2.属性配置 * 3.内容 * */
          return h('a',
            { 
              attrs: {  href: '#' + this.to }
            }, this.$slots.default)
        }
      })
    
      Vue.component('router-view', { 
    	render (h) { 
    	  let component = null
    	  // 先拿到当前地址
    	  // 然后通过路由配置关系找到对应的组件并渲染出来
    	  // 通过 this.$router.$options.routes 获取路由配置关系
    	  // 通过 this.$router.current 获取当前路由
    	  const route = this.$router.$options.routes.find(
    		(r) => r.path === this.$router.current
    	  )
    	  if (route) { 
    		component = route.component
    	  }
    	  return h(component)
    	}
      })
    }
    
    export default VueRouter

在 `router-view` 中打印 `this.$router`  
![router-view中的this.$router][router-view_this._router]  
打印`VueRouter.install()`的第一个参数`_Vue`  
![\_Vue][Vue]

**注意**

1.  `install`方法是在 `Vue.use()` 中被调用的，即其被调用的时间时非常早的(早于`VueRouter`实例化以及根组件的实例化)
2.  通过全局混入的方式将 $router 挂载在全局 Vue 上
3.  全局混入的目的是为了 在根组件初始化完毕的时候 给全局组件添加一个钩子`beforeCreate`，在该钩子上给`Vue`的原型链上挂载路由实例，这样每个`Vue组件`都能访问该路由实例

以上的 `myVueRouter` 没有考虑嵌套路由的情况，大家理解之后可以当作一个练习去完成

这个源码分析过程本来是有个循序渐进的过程的，但是如果一步步分开写的话文章会显得非常冗余，因此直接把结果写出来了，其中已经尽可能地通过注释来解释每一步是用来干什么的，如果有问题欢迎评论或者私信！

感谢你能看到这里！

[router-view_this._router]: /images/20221123/0c1706c01a4a429abf2bc44cbeb38da5.png
[Vue]: /images/20221123/42cf48a20e0f46389d213a23462f7738.png