封装一个基础的vue-router

偏执的太偏执、 2021-08-14 00:06 429阅读 0赞

## 前言 ##

### 主要知识点： ###

*  **路由原理**
 *  **Hash与History**
 *  **实现路由**

## 一、一个vue路由的工作原理 ##

### 前端路由与后端路由的区别： ###

**后端路由：**  
输入url>请求发送到服务器>服务器解析请求的路径>拿取对应的页面>返回回去  
**前端路由：**  
输入url>js解析地址>找到对应的地址的页面>执行页面生成的js>看到页面

### vue-router工作流程 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9taW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]

## 二、Hash与history的使用 ##

**hash:**

*  \#号后的就是hash的内容
 *  可以通过location.hash拿到
 *  可以通过onhashchange监听hash的改变
 *  可以在\#号后面加路径不会向服务器请求

--------------------

**history:**

*  history即正常的路径
 *  location.pathname
 *  可以用onpopstate监听history变化

## 三、Vue插件基础知识 ##

> 如：vue-router、vuex、element-ui都是插件

**插件基础点：**

*  Vue.use去使用一个插件，并且去执行install方法
 *  Vue.mixin往vue的全局混入自定义的操作
 *  可以通过this.$options拿到new Vue时的参数

--------------------

### 示例： ###

以下都是在`main.js`执行

**1、初始Vue.use()**

Vue.use({ 
    console.log('use') //会打印出use
    })

**2、install属性**

let a = function() { 
      console.log(a)
    }
    //或 let a ={}
    a.install=function(){ 
      console.log('install')
    }
    Vue.use(a) // 会打印install，而不会打印a。
    // 如果你给他一个方法，他就执行这个方法，
    // 但是无论你给他的任何东西，只要给他一个install属性，他就会执行install。

**3、Vue.mixin()**

let a = function() { 
      console.log(a)
    }
    //或 let a ={}
    a.install=function(vue){ 
       // Vue.mixin 全局混入自定义操作。上面的vue是作为参数传进来的，而不是import Vue from 'vue'中的Vue
       vue.mixin({ 
        data () { 
          return { 
            c:123456 // 在其他页面this.c
          }
        },
        methods:{ 
          globalMethods(){ 
            console.log('我是全局方法') // 在其它页面this.globalMethods()
          }
        },
        created() { 
          console.log(this)
        }
      })
    }
    Vue.use(a)

**4、Vue工具类（Vue.util）**  
vue 工具类: `defineReactive`、`extend`、`mergeOptions`、`warn`

let obj = { 
      key:'KEY'
    }
    setTimeout(function () { 
      obj.key='KEY2' // 3s改变{ {this.obj1.key}}
    },3000)
    
    let a = function() { 
      console.log(a)
    }
    //或 let a ={}
    a.install=function(vue){ 
      console.log(vue.util) // vue 工具类: defineReactive、extend、mergeOptions、warn
      vue.util.defineReactive(obj,'key')  // 监听。源码使用的是Object.defineProperty()
      vue.mixin({ 
        beforeCreate(){ 
          this.obj1=obj //在其他页面{ {this.obj1.key}}，值为KEY。
        }
      })
    }

vue.extend() 与 vue.util.extend() 区别：

vue.extend() // 单元测试
    const home = Vue.extend(home)
    // 新建这个组件的构造函数，也就是组件的this
    const vm = new home().$mount()
    vue.util.extend() // 浅拷贝对象

## 四、 封装基础vue-router ##

准备完了前面几个知识点，我们下面来整代码，需要注意的是，下面只是个基础的vue-router，只可以页面切换。本篇只是为了熟悉源码，不为实际需要。  
在**src**文件夹下新建一个文件夹**myrouter**,里面再新建一个**index.js**文件。  
在原来的router文件夹里的index.js中把**原来引入router的路径**换为`import VueRouter from '../myrouter'`

**编辑myrouter文件夹下的index.js**

// 记录history对象
    class HistoryRoute{ 
        constructor(){ 
            // 要监听的路径
            this.current=null;
        }
    }
    // vuerouter本身
    class vueRouter{ 
        constructor(options){ 
            this.mode=options.mode||'hash'; //配置模式
            this.routes=options.routes||[]; // routes路由表
            this.routesMap=this.createMap(this.routes); // 调用 createMap,参数是路由表routes
            this.history=new HistoryRoute;// 实例化history
            this.init(); // 初始化
        }
        init(){ 
            if(this.mode=='hash'){  // 判断是否是hash模式
                location.hash?'':location.hash='/'; // 自动加#号。如果有hash返回空字符串。否则返回/
                window.addEventListener('load',()=>{  // 监听页面加载完成
                    this.history.current=location.hash.slice(1); //拿到hash值，把#去掉。赋给实例化的history的current路径。
                })
                window.addEventListener('hashchange',()=>{  // 监听hash改变
                    this.history.current=location.hash.slice(1);
                })
            }
        }
        // 路径对应组件。新组合一个对象。如：{'/':Home},也就是映射。
        createMap(routes){ 
            return routes.reduce((memo,current)=>{  // current 就是路由表routes
                memo[current.path]=current.component;
                return memo
            },{ })
        }
    }
    
    vueRouter.install=function(Vue){ 
        // 写插件要注意判断插件是否注册
        if(vueRouter.install.installed)return
        vueRouter.install.installed=true;
        // 向vue里面混入操作
        Vue.mixin({ 
            beforeCreate(){ 
                if(this.$options&&this.$options.router){  // 在App.vue文件里如果有router选项的话
                    this._root=this; // 这里的this指向当前Vue实例，缓存下自身。
                    this._router=this.$options.router; // 挂载下选项里传进来的router.
                    Vue.util.defineReactive(this,'current',this._router.history); //监听this.current,并且传入第三个参数。相当于children。
                }else{ 
                    this._root=this.$parent._root; //如果没有就向上查找一级，直到查到App.vue里new Vue({router})为止。
                }
    
                // 这个方法只是说明this.$router只读，私有变量思想
                Object.defineProperty(this,"$router",{  //this指当前组件实例
                    get(){  
                        return this._root._router; // 返回挂载后的router
                    }
                })
            }
        })
        // 定义组件
        Vue.component('router-view',{ 
            render(h){ 
               let current=this._self._root._router.history.current;// 拿到当前存进去的router实例里的current
               let routerMap=this._self._root._router.routesMap;//拿到当前存进去的router实例里的routesMap
               return h(routerMap[current]); // 拿到routerMap，调用h方法。渲染routerMap对应关系。放到router-view组件里面。
            }
        })
    }
    // 暴露vuerouter
    export default vueRouter;

## 结语 ##

前端的路上我们一起前行。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9taW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: /images/20210813/063871066cd2446aa71051f5ed150481.png