vue-router原理理解

流程图

首先看一张工作流程图

主要问题

路由的主要步骤如上，其中涉及的主要问题有

1.如何监听url变化

首先vue-router组件常用的有两种模式，一种是hash，一种是history。这两种模式的url模式不同，具体区别如下：

	hash	history
区别	url“#”后的部分	整个url部分
取值	通过location.hash取值	通过location.pathname
监听	通过onhashchange监听变化	通过onpopstate监听变化

2.如何劫持router组件的current变量

2.1.Vue.use的用法

Vue.use可以用来执行简单的函数，但有一个重要特征就是会自动调用对象的是install属性，并且vue还会将自身实例传递进去，这样在插件中就可以使用vue提供的接口来进行开发了。例如：

//前面的import省略
function a(){
	console.log("a")
}
Vue.use(a);//此时就会直接执行a函数输出a
----------------
//若a中有install方法，则vue会注入自身实例
a.install = function(vue){
	//在此处可以拿到vue实例
}

2.2.mixin混入

接上2.1在install中可以使用vue实例，那使用实例可以做什么呢，这里介绍一个常用的全局函数mixin，此函数可以在vue的生命周期中混入各种属性，例如：

a.install = function(vue){
	//全局混入vue实例
	vue,mixin({
	data(){
		return {
			//可以zai data混入数据，在全局所有组件中都可以拿到testKey
			testKey:'this is mixin testKey'
		}
	},
	//create之前混入current
	beforeCreate(){
	//添加劫持
			vue.util.defineReactive(this,'current',this._router.history)
	}
	
}

2.3.defineProperty劫持

vue中封装了Object.defineProperty方法，使用vue.util.defineReactive可对对象里的属性进行监听（vue中data也是通过此实现的）。

3.如何渲染

通过Vue.component()渲染，例

Vue.component('router-view',{
	render(createElement){
		//通过current获取组件myComponent ，然后创建返回
		
		return createElement(myComponent)
	}
})

所以vue-router在使用是需要天剑 router-view进行渲染。