1.vue-router的原理,手写vue-router
- 要知道vue-router的原理,首先还是要看vue-router是怎么使用的
- 但是大多数使用过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;