Vue-Router原理

Hash 与 History
路由原理
实现路由
/**
 * 1、前端路由与后端路由的区别
  后端路由: 输入url => 请求发送到服务器 => 服务器解析请求路径 => 拿到对应页面 => 返回出去
  前端路由： 输入url => js解析地址 => 找到对应地址页面 => 执行页面生成的js => 看到页面
 区别：
 1、前端路由不用发请求，直接在浏览器访问解析；
 2、前端路由里有hash
 */

/**
 * 2、Hash和History
  hash:
   1、址栏里出现#，表示hash，#后面就是hash内容；
   2、可以通过location.hash拿到；
   3、可以通过onhashchange监听hash改变；
   特点： hash模式下不会发送请求；
 history:
   1、history即正常地址栏路径；
   2、location.pathname获取路径；
   3、可以用onpopstate监听history变化；
   特点：
 */

/**
 * 3、vue插件基础知识
 1、Vue.use(参数) => 使用一个插件；
    如果参数为一个方法，则会被执行；
    但是无论参数为任何东西，只要有install属性，则优先会执行install方法；
 2、ue.mixin() => 往vue全局中混入属性，可以将一些常用方法注入到vue中，通过this可以访问到；
 核心是用来自定义生命周期
 var a = function(){
   console.log('aaa');
 }
 a.install = function(){
   console.log('install');
   vue.mixin({
     data: ()=>{
       return b: 1111 //在vue整个项目中都能访问到b这个属性
     }
   })
 }
 Vue.use(a); //会打印出install
 */

/**
 * 4、vue源码分析
 1、Vue.util //表示vue中工具类
  共有四个：
     warn
     extend
     mergeOptions
     defineReactive
 vue.extend(); //
 vue.util.extend(); //浅拷贝
 */

/** 5、手写router插件*/
class HistoryRoute{
    constructor (){
       this.current = null;
    }
}
//options 表示 new Routers里传入的值
class  vueRouter {
    constructor (options){
        this.mode = options.mode || 'hash';
        this.routers = options.routers || [];
        this.history = new HistoryRoute;
        this.routersMap = this.creatMap(this.routers);
        this.init();
    }
    init(){
        if(this.mode == 'hash'){
            //自动加#
            location.hash ? '' : location.hash = '/';
            window.addEventListener('load',() => {
                this.history.current = location.hash.slice(1);
            })
            window.addEventListener('hashchange',() => {
                this.history.current = location.hash.slice(1);
            })
        }
    }
    creatMap(routers){
       return routers.reduce((m,current)=>{
           m[current.path] = current.component;
           return m;
       })
    }
}

vueRouter.install = function(Vue){  
    //写插件要注意判断插件是否已经注册
    if(vueRouter.install.installed) return;
    vueRouter.install.installed = true;
    Vue.mixin({
        beforeCreate(){
            if(this.$options && this.$options.router){
                //当前this指向vue实例
                this._root = this;
                this._router = this.$options.router;
                Vue.util.defineReactive(this,'current',this._root.history); //第三个参数作为children,一层层查找
            }else{
                this._root = this.$parent._root; //如果没有找到，向上查找一直找到为止；
            }
        }
    })
    Vue.component('router-view',{
        render(h){
            let current = this._self._root._router.history.current;
            console.log(current);
            let routerMap = this._self._root._router.routersMap;
            return h(routerMap[current]);
        }
    });
}

export  default  vueRouter;
巴特西

Vue-Router原理

最新文章

热门文章
