手写迷你VueRouter

2021-05-30 130 阅读1分钟

文章内容输出来源：拉勾大前端高薪训练营

一个普通的ES6类

有一个特殊的静态方法install

参数：(Vue)

Vue类

内部处理逻辑

1、判断当前插件是否已被安装

if(VueRouter.install.installed){
    return;
}
VueRouter.install.installed = true

2、把Vue类缓存在模块内部

_Vue = Vue

3、把外部在创建Vue实例时传入的router对象注入到Vue实例。

_Vue.mixin({
    beforeCreate(){
        if(this.$options.router){
            _Vue.prototype.$router = this.$options.router

        }

    }
})

构造器函数中有5个处理逻辑

1、接收外部传入的选项，其中包含了页面路由规则数据routes

2、初始化表示当前路由路径的响应式data数据。

3、根据routes生成路由路径与对应路由组件对应的映射对象routeMap

4、注册2个全局组件router-link和router-view

5、初始化事件

用于根据不同的路由模式hash或history分别监听hashchange事件或popstate事件。