vue-router的原理,手写vue-router

1.vue-router的原理,手写vue-router

1. 要知道vue-router的原理，首先还是要看vue-router是怎么使用的
2. 但是大多数使用过Vue的都知道,vue-router是怎么使用的,所以直接总结

• 会有两个全局的组件 router-link 及 router-view，这两个全局组件

• 其二router-link会有一个to属性，是必传的属性

• 会监听哈希值的变化，根据不同的哈希值，渲染对应的组件

• 只要在main.js中挂载了router这个属性，其他的组件，都会有这个属性

  2.具体的myRouter

  let Vue;
  function install(_Vue){
        
        
  	Vue = _Vue;
  	//1.利用全局混入，实现在main.js挂载router属性之后，其他组件都会有这个属性
  	Vue.mixin({
        
        
  		beforeCreate(){
        
        
  			if (this.$options.router){
        
        
  				//如果有这个属性，那么就是man.js这个根
  				this.$router = this.$options.router
  			}else if(this.$parent){
        
        
  				//如果有this.$parent那么就是子组件
  				this.$router = this.$parent.$router;
  			}
  		}
  
  	})
  	//1.创建两个全局的组件
  	Vue.component('router-link',{
        
        
  		props:{
        
        
  			to:{
        
        
  				require:true
  			} //这里很明显是，要传入一个to的属性,其二是to这个属性是必传的
  		},
  		render(h){
        
        
  			return h('a',{
        
        attrs:{
        
        href:'#'+this.to}},this.$slots.default)
  		}
  	})
  	//4.创建第二个全局组件<router-view />
  Vue.component('router-view',{
        
        
  	render(h){
        
        
  		return h(this.$router.routerMap[this.$router._router]);
  	}
  	//这里的this.$router就是我们new VueRouter()的这个实例
  	//2.我们在这个实例中添加一个属性routerMap是一个对象
  	//3.routerMap的结构是这样的{'\':componet,'home':componet2}这样的结构
  	//就是将这个哈希值对应要展示的组件
  	//4.这里的this.$router._router就是保存这个哈希值
  	
  })
  }
  //这里解释一下render(h){return h()};意思是将这个全局组件渲染成什么的html内容
  //2.h();这个函数，会有三个参数，1.就是渲染成什么标签  2.就是这个标签有哪些属性  3.就是这个这个标签中间显示的内容
  //3.这里不了解的可以去Vue.js官方查render渲染函数是怎么使用的
  
  //好了，现在我们需要处理和实现这个类VueRouter
  class VueRouter{
        
        
  	constructor(options){
        
        
  		//options就是一个对象
  		let {
        
        routes} = options;
  		this.routerMap = {
        
        };
  		routes.forEach(item=>{
        
        
  			this.routerMap[item.path] = item.component
  		});
  		//经过上面的循环遍历this.routerMap的结构为
  		//{'/':home,'xns':smx};哈希值对应一个组件
  		this._router = window.location.hash.slice(1);//获取对应的哈希值
  		window.addEventListener('load',()=>{
        
        
  			this._router = window.location.hash.slice(1);//重新获取哈希值
  		})
  		window.addEventListener('hashchange',()=>{
        
        
  			//但哈希值改变了，我们重新获取
  			this._router = window.location.hash.slice(1);
  		})
  		Vue.util.defineReactive(this,'_router','/');//这个是将this._rotuer这个值变成响应式的
  		
  	}
  
  }
  //最后一步就是导出这个类
  VueRouter.install = install;
  export default VueRouter;