浅析vue-router源码并尝试实现一个简单的前端路由

时间  2021-08-12
标签 html 前端 vue html5 node git github vue-router vuex json 栏目 系统网络 繁體版
原文   原文链接

前言

做为vue生态圈中的重要一员：vue-router已经成为了前端工程师要掌握的基本技能之一。本文抛开了vue-router的平常使用，从源码入手，一块儿学习下源码并本身尝试实现一个本身的vue-router。阅读过程当中,若有不足之处，恳请斧正。html

本文共2000余字，阅读本篇大概须要15分钟。若有不足之处，恳请斧正

此处推荐一篇以前实现一个本身的vuex的文章，可与本篇搭配观看

从0到1手写一个vuex
前端

源码浅析

首先来看下源码目录结构：vue

// 路径:node_modules/vue-router
├── dist ---------------------------------- 构建后文件的输出目录
├── package.json -------------------------- 不解释
├── src ----------------------------------- 包含主要源码 
│   ├── components --------------------------- 路由组件
│   │   ├── link.js ---------------- router-link组件
│   │   ├── view.js -- router-view组件
│   ├── history -------------------------- 路由模式
│   │   ├── abstract.js ------------------------ abstract路由模式
│   │   ├── base.js ----------------------- history路由模式
│   │   ├── errors.js ------------------ 错误类处理
│   │   ├── hash.js ---------------------- hash路由模式
│   │   ├── html5.js -------------------------- HTML5History模式封装
│   ├── util ---------------------------- 工具类功能封装
│   ├── create-matcher.js ------------------------- 路由映射表
│   ├── create-route-map.js ------------------------------- 建立路由映射状态树
│   ├── index.js ----------------------------  主入口文件
|   ├── install.js ---------------------------- 路由装载文件
复制代码

入口开始分析

vue-router实例

从入口文件index.js中咱们能够看到暴露出了一个VueRouter类,这个就是咱们在 vue 项目中引入 vue-router 的时候所用到的new Router() 其中具体内部代码以下(为了方便阅读,省略部分代码)html5

export default class VueRouter {
  constructor (options: RouterOptions = {}) {
    this.app = null
    this.apps = []
    this.options = options
    this.beforeHooks = []
    this.resolveHooks = []
    this.afterHooks = []
    this.matcher = createMatcher(options.routes || [], this)
    let mode = options.mode || 'hash'
    this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false
    if (this.fallback) {
      mode = 'hash'
    }
    if (!inBrowser) {
      mode = 'abstract'
    }
    this.mode = mode

    switch (mode) {
      case 'history':
        this.history = new HTML5History(this, options.base)
        break
      case 'hash':
        this.history = new HashHistory(this, options.base, this.fallback)
        break
      case 'abstract':
        this.history = new AbstractHistory(this, options.base)
        break
      default:
        if (process.env.NODE_ENV !== 'production') {
          assert(false, `invalid mode: ${mode}`)
        }
    }
  }
  init () {}
  function registerHook (){}
  go(){}
  push(){}
  VueRouter.install = install
  VueRouter.version = '__VERSION__'
    
  if (inBrowser && window.Vue) {
      window.Vue.use(VueRouter)
  }

复制代码

从入口文件中咱们能够看出里面包含了如下几个主要几个步骤：node

  1. 初始化路由模式
  2. 根据传入的routes参数生成路由状态表
  3. 获取当前路由对象
  4. 初始化路由函数
  5. 注册Hooks等事件
  6. 添加install装载函数

install注册函数

上述暴露出的router类中挂载了一个install方法，这里咱们对其作一个简要的分析（这也是咱们下面实现一个本身路由的思惟引导）。在咱们引入vue-router而且实例化它的时候，vue-router内部帮助咱们将router实例装载入vue的实例中，这样咱们才能够在组件中能够直接使用router-link、router-view等组件。以及直接访问this.$router、this.$route等全局变量，这里主要归功于install.js帮助实现这一个过程,主要分如下几个步骤：git

  1. 首先引入vue-router后须要利用beforeCreate生命周期进行装载它，用来初始化_routerRoot，_router，_route等数据,
  2. 同时设置全局访问变量$router和$router
  3. 完成router-link和 router-view 两个组件的注册

在源码install.js中能够体现github

import View from './components/view'
import Link from './components/link'

export let _Vue

export function install (Vue) {
  if (install.installed && _Vue === Vue) return
  install.installed = true
  _Vue = Vue
  // 混入vue实例中
  Vue.mixin({
    beforeCreate () {
      if (isDef(this.$options.router)) {
        this._routerRoot = this
        this._router = this.$options.router
        this._router.init(this)
        Vue.util.defineReactive(this, '_route', this._router.history.current)
      } else {
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
      }
      registerInstance(this, this)
    },
    destroyed () {
      registerInstance(this)
    }
  })
  // 设置全局访问变量$router
  Object.defineProperty(Vue.prototype, '$router', {
    get () { return this._routerRoot._router }
  })

  Object.defineProperty(Vue.prototype, '$route', {
    get () { return this._routerRoot._route }
  })
 // 注册组件
  Vue.component('RouterView', View)
  Vue.component('RouterLink', Link)
}
复制代码

上述咱们对vue-router的源码作了一个粗略的脉络梳理，下面咱们将实现一个简化版的vue-router。在此以前咱们须要简单的了解一些知识点vue-router

前置知识

咱们都知道vue-router提供一个mode参数配置，咱们能够设置history 或者是hash 两种参数背后的实现原理也各不相同vuex

hash的实现原理json

http://localhost:8080/#login

#符号自己以及它后面的字符称之为hash，可经过window.location.hash属性读取。H5新增了一个hashchange来帮助咱们监听浏览器连接的hash值变化。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>老 yuan</title>
</head>
<body>
  <h1 id="app"></h1>
  <a href="#/jin">掘金</a>
  <a href="#/sn">黄小虫</a>
  <script>
      window.addEventListener('hashchange',()=>{
          app.innerHTML = location.hash.slice(2)
      })
  </script>
</body>
</html>
复制代码

history的实现原理

http://localhost:8080/login 一样H5也新增了pushState和popstate来帮助咱们无感知刷新浏览器url

<body>
  <h1 id="app"></h1>
  <a onclick="to('jin')">掘金</a>
  <a onclick="to('sn')">黄小虫</a>
<script >
    function to(pathname) {
        history.pushState({},null,pathname)
        app.innerHTML = pathname
    }
    window.addEventListener('popstate',()=>{
        to(location.pathname)
    })
</script>
</body>
复制代码

在咱们理清楚无感知刷新url的原理后，咱们要基于这些原理封装出一个vue-router

开始实现本身的vue-router

实现install装载方法

首先咱们须要初始化一下咱们项目结构，新建simple-vue-router.js,根据上面分析，这里咱们须要暴露出一个router类,其中须要包含一个install方法

let Vue // 用于保存vue实例
class VueRouter(){ // router类
    
}
function install(_vue){ // 装载函数
    
}
export default {
    VueRouter,
    install
}
复制代码

其中的install须要实现如下几点功能

  1. 初始化_routerRoot，_router，_route等数据,
  2. 设置全局访问变量$router和$router
  3. 完成router-link和 router-view两个组件的注册

代码以下:

let Vue // 用于保存vue实例
class VueRouter {
	// router类
}
VueRouter.install = function(_vue) {
	// 装载函数
	//每一个组件都有 this.$router / this.$route 因此要mixin一下
	Vue = _vue
	// 在每一个组件中均可以获取到 this.$router与this.$route，这里进行混入vue实例中
	Vue.mixin({
		beforeCreate() {
			// 若是是根组件则
			if (this.$options && this.$options.router) {
				this._root = this //把当前vue实例保存到_root上
				this._router = this.$options.router // 把router的实例挂载在_router上
			} else {
				// 若是是子组件则去继承父组件的实例(这样全部组件共享一个router实例)
				this._root = this.$parent._root
			}
			// 定义router实例 当访问this.$router时即返回router实例
			Object.defineProperty(this, '$router', {
				get() {
					return this._root._router
				}
			})
			// 定义route 当访问this.$route时即返回当前页面路由信息
			Object.defineProperty(this, '$route', {
				get() {
					return {}
				}
			})
		}
	})
	// 全局注册 router的两个组件
	Vue.component('router-link', {
		render(h) {}
	})
	Vue.component('router-view', {
		render(h) {}
	})
}
export default VueRouter

复制代码

实现router类

上述实现了install方法帮助咱们将router挂载在vue实例中,接下来咱们须要完善一下router类中的功能。按照上文源码中的分析,咱们须要实现如下几点功能：

  1. 生成根据传入的rotues参数生成，路由状态表。即如若传入参数为
routes:[    
    {              
      path: '/',  
      name: 'index', 
      component: index   
    },
    {              
      path: '/login',  
      name: 'login', 
      component: login 
    },
    {              
      path: '/learn',  
      name: 'learn', 
      component: learn   
    },
  ]
复制代码

将其用path为key,component为value的规律格式化为

{
 '/':index,
 '/login':login,
 '/learn':learn 
}
复制代码
  1. 定义当前路由变量，经过劫持进行实时渲染对应组件
  2. 定义一个函数，具体实现不一样模式应对应使用的处理方法

具体代码以下

let Vue // 用于保存vue实例
class VueRouter {
  // router类
  constructor(options) {
  	// 默认为hash模式
  	this.mode = options.mode || 'hash'
  	this.routes = options.routes || []
  	// 路由映射表
  	this.routeMaps = this.generateMap(this.routes)
  	// 当前路由
  	this.currentHistory = new historyRoute()
  	// 初始化路由函数
  	this.initRoute()
  }
  generateMap(routes) {
  	return routes.reduce((prev, current) => {
  		prev[current.path] = current.component
  		return prev
  	}, {})
  }
  initRoute() {
  	// 这里仅处理hash模式与history模式
  	if (this.mode === 'hash') {
  		// 先判断用户打开时url中有没有hash，没有重定向到#/
  		location.hash ? '' : (location.hash = '/')
  		// 监控浏览器load事件,改变当前存储的路由变量
  		window.addEventListener('load', () => {
  			this.currentHistory.current = location.hash.slice(1)
  		})
  		window.addEventListener('hashchange', () => {
  			this.currentHistory.current = location.hash.slice(1)
  		})
  	} else {
  		location.pathname ? '' : (location.pathname = '/')
  		window.addEventListener('load', () => {
  			this.currentHistory.current = location.pathname
  		})
  		window.addEventListener('popstate', () => {
  			this.currentHistory.current = location.pathname
  		})
  	}
  }
}
class historyRoute {
  constructor() {
  	this.current = null
  }
}
VueRouter.install = function(_vue) {
// 省略部分代码
}
export default VueRouter

复制代码

完善代码，实现实时刷新页面视图

在构建完router类以后，咱们发现还存在一个问题,那就是当前路由状态currentHistory.current仍是静态的,当咱们改变当前路由的时候页面并不会显示对应模板。这里咱们能够利用vue自身的双向绑定机制实现

具体代码以下

let Vue // 用于保存vue实例
class VueRouter {
	// router类
	constructor(options) {
		// 默认为hash模式
		this.mode = options.mode || 'hash'
		this.routes = options.routes || []
		// 路由映射表
		this.routeMaps = this.generateMap(this.routes)
		// 当前路由
		this.currentHistory = new historyRoute()
		// 初始化路由函数
		this.initRoute()
	}
	generateMap(routes) {
		return routes.reduce((prev, current) => {
			prev[current.path] = current.component
			return prev
		}, {})
	}
	initRoute() {
		// 这里仅处理hash模式与history模式
		if (this.mode === 'hash') {
			// 先判断用户打开时url中有没有hash，没有重定向到#/
			location.hash ? '' : (location.hash = '/')
			// 监控浏览器load事件,改变当前存储的路由变量
			window.addEventListener('load', () => {
				this.currentHistory.current = location.hash.slice(1)
			})
			window.addEventListener('hashchange', () => {
				this.currentHistory.current = location.hash.slice(1)
			})
		} else {
			location.pathname ? '' : (location.pathname = '/')
			window.addEventListener('load', () => {
				this.currentHistory.current = location.pathname
			})
			window.addEventListener('popstate', () => {
				this.currentHistory.current = location.pathname
			})
		}
	}
}
class historyRoute {
	constructor() {
		this.current = null
	}
}
VueRouter.install = function(_vue) {
	// 装载函数
	//每一个组件都有 this.$router / this.$route 因此要mixin一下
	Vue = _vue
	// 在每一个组件中均可以获取到 this.$router与this.$route，这里进行混入vue实例中
	Vue.mixin({
		beforeCreate() {
			// 若是是根组件则
			if (this.$options && this.$options.router) {
				this._root = this //把当前vue实例保存到_root上
				this._router = this.$options.router // 把router的实例挂载在_router上
				//利用vue工具库对当前路由进行劫持
				Vue.util.defineReactive(this,'route',this._router.currentHistory)
			} else {
				// 若是是子组件则去继承父组件的实例(这样全部组件共享一个router实例)
				this._root = this.$parent._root
			}
			// 定义router实例 当访问this.$router时即返回router实例
			Object.defineProperty(this, '$router', {
				get() {
					return this._root._router
				}
			})
			// 定义route 当访问this.$route时即返回当前页面路由信息
			Object.defineProperty(this, '$route', {
				get() {
					return {
						// 当前路由
						current: this._root._router.history.current
					}
				}
			})
		}
	})
	// 全局注册 router的两个组件
	Vue.component('router-link', {
		props: {
			to: String,
			tag: String
		},
		methods: {
			handleClick(event) {
				// 阻止a标签默认跳转
				event && event.preventDefault && event.preventDefault()
				let mode = this._self._root._router.mode
				let path = this.to
				this._self._root._router.currentHistory.current = path
				if (mode === 'hash') {
					window.history.pushState({}, '', '#/' + path.slice(1))
				} else {
					window.history.pushState({}, '', path.slice(1))
				}
			}
		},
		render(h) {
			let mode = this._self._root._router.mode
			let tag = this.tag || 'a'
			return (
				<tag on-click={this.handleClick} href={mode === 'hash' ? `#${this.to}` : this.to}>
					{this.$slots.default}
				</tag>
			)
		}
	})
	Vue.component('router-view', {
		render(h) {
			// 这里的current经过上面的劫持已是动态了
			let current = this._self._root._router.currentHistory.current
			let routeMap = this._self._root._router.routeMaps
			return h(routeMap[current]) // 动态渲染对应组件
		}
	})
}
export default VueRouter

复制代码

到此为止，一个简单的路由管理器已经完成。实际上相对vue-router来讲仍是缺乏了不少诸如导航守卫、动态路由等功能。千里之行始于足下，本篇文章旨在经过简要分析vue-router的原理以及实践一个简单的路由器帮助你们走进vue-router原理的大门，后面的就要靠你们本身坚持继续深刻学习了。

参考资料

vue-router官方源码
手写vue-router源码

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程