1
import Vue from 'vue';
2

3
import install from './install';
4

5

6
function deepMapRoute(routes){
7
    routes.forEach((item)=>{
8
        this[item.path]=item.component;
9

10
        //此处检查当前路由下,是否还有子路由children,如果有就递归遍历子路由
11
        if(item.children instanceof Array&&item.children.length){
12
            deepMapRoute.call(this,item.children);
13
        }
14
    })
15
}
16

17
class MyRouter{
18

19
    constructor(options){
20
        //当new MyRouter创建实例对象时,会调用该函数
21
        //获取配置对象中的routes数组
22
        this.routes = options.routes;
23

24
        //创建mapRoute对象,用于存储路径与组件之间的映射关系(方便后续查找)
25
        this.mapRoute = {};
26

27
        /*
28
            此处仅实现mode:history模式,并未实现hashHistory模式
29
            history模式的实现原理是通过H5新增的API--window.history实现对浏览器历史记录栈的操作
30
        */
31
        this.history = window.history;
32

33
        /*
34
            通过递归对用户传入的routes所有路由进行结构转换
35
            用户传入:
36
                    routes:[
37
                            {
38
                                path:"/home",
39
                                component:Home,
40
                                children:[
41
                                    {
42
                                        path:"/home/xixi",
43
                                        component:Xixi
44
                                    }
45
                                ]
46
                            },
47
                            {
48
                                path:"/about",
49
                                component:About
50
                            }
51
                        ]
52

53
                    转换之后的mapRoutes:
54
                        {
55
                            "/home":{
56
                                component:Home,
57
                                children:{
58
                                    "/home/xixi":{
59
                                        component:Xixi
60
                                    }
61
                                }
62
                            },
63
                            "/about":{
64
                                component:About
65
                            }
66
                        }
67
        */
68
        deepMapRoute.call(this.mapRoute,this.routes);
69

70
        /*
71
            将当前的路由器实例对象,放到Vue原型对象上,所有的Vue组件都能看得到
72
            例如:Vue组件内部使用this.$router
73
        */
74
        Vue.prototype.router = this;
75

76
        /*
77
            Vue.observable()可以将某个普通对象,变成响应式对象,响应式对象的属性值发生修改,Vue视图会重新渲染
78
            将当前的响应式对象,放到Vue原型对象上,所有的Vue组件都能看得到(可以理解为所有组件共享的data)
79

80
            new URL(window.location)可以得到URL对象,从pathname属性中,可以获得当前的路由地址
81
            此处是为了辨别用户一上来的路由路径是什么,例如:http://localhost:8080/about  --->  得到的结果就是/about
82

83
            例如:Vue组件内部使用this.$route
84
        */
85
        Vue.prototype.route = Vue.observable({
86
            path:new URL(window.location).pathname
87
        })
88
    }
89

90
    /*
91
        该方法用于向浏览器历史记录栈中推送记录,控制URL地址变化,并控制Vue组件重新渲染
92
    */
93
    push(path){
94

95
        //控制URL地址变化
96
        this.history.pushState({},"",path);
97

98
        /*
99
            修改Vue原型对象内的route属性的path值的变化
100
            在constructor,我们生成了一个响应式对象route,内部的path属性发生变化,会导致Vue组件重新渲染
101
        */
102
        Vue.prototype.route.path=path;
103
    }
104
}
105

106
//想使用Vue.use(MyRouter)语法,必须提供install方法
107
MyRouter.install=install
108

109
export default MyRouter

1
import RouterView from './components/view'
2
import RouterLink from './components/link'
3

4
//用于辨别当前内容是否为空,不为空返回true
5
function isDep(v){
6
    return v!==undefined;
7
}
8

9
/*
10
    想要使用Vue.use()语法声明使用当前插件,需要提供一个install方法
11
    例如:Vue.use(VueRouter)
12
*/
13
function install(Vue){
14

15
    /*
16
        注册全局组件router-link和router-view
17
            router-link:默认生成a标签,实现声明式导航
18
            router-view:用于显示对应层级的路由组件
19
    */
20
    Vue.component("RouterView",RouterView);
21
    Vue.component("RouterLink",RouterLink);
22

23
    /*
24
        Vue.mixin()用来向所有的Vue组件注入生命周期钩子函数
25
        下面的代码是可以让所有组件在beforeCreate阶段都执行内部的代码
26
    */
27
    Vue.mixin({
28
        beforeCreate(){
29
            if(isDep(this.$options.router)){
30
                /*
31
                    如果能进入该判断,说明当前对象的$options对象中具有router属性
32
                    例如:new Vue({
33
                        router
34
                    })
35

36
                    给当前的Vue组件添加一个_routerRoot属性,并指向自己
37
                    作用:声明当前实例对象是路由的根组件
38
                    注意:整个Vue项目中,只有main.js中new Vue()得到的实例对象,有资格拥有_routerRoot属性
39
                */
40
                this._routerRoot=this;
41
            }
42
        }
43
    })
44
}
45

46
export default install

1
import Vue from 'vue';
2

3
/*
4
    该文件是router-link的源码实现
5
    router-link是函数组件
6
    实现原理:
7
        1.默认生成a标签
8
        2.给当前a标签绑定点击事件
9
        3.禁止a标签的默认事件,防止他自动跳转
10
        4.在点击事件内部,调用编程式导航this.$router.push方法
11
*/
12
export default {
13
        name: 'RouterLink',
14
        functional: true,
15
        props: {
16
                tag: {
17
                        type: String,
18
                        default: 'a',
19
                },
20
                path: {
21
                        type: String.require,
22
                },
23
        },
24
        render: (_, { parent, props, data, children }) => {
25
                /*
26
            获取父组件创建虚拟DOM的方法
27
        */
28
                let createElement = parent.$createElement;
29

30
                /*
31
            绑定点击事件,并禁止a标签的默认行为
32
            使用编程式导航push方法,根据props传递下来的path属性值,实现URL地址变化
33
        */
34
                data.on = {
35
                        click: function (event) {
36
                                event.preventDefault();
37
                                Vue.prototype.router.push(props.path);
38
                        },
39
                };
40

41
                /*
42
            将props传递下来的path属性值赋值给a标签,作为a标签的href属性
43
        */
44
                data.attrs.href = props.path;
45

46
                /*
47
            通过createElement方法生成虚拟DOM
48
            children是组件标签之间写的内容,例如<router-link>aaa</router-link>,那children就是"aaa"
49
        */
50
                return createElement(props.tag, data, children);
51
        },
52
};

1

2
import Vue from 'vue';
3

4
/*
5
    该文件是router-view的源码实现
6
    router-view是函数组件
7
    实现原理:
8
        1.声明当前组件是router-view组件
9
        2.通过depth变量,记录当前是几级路由
10
            (通过while循环,从当前组件往上找,看遇到了几个rouiter-view,直至找到路由根组件为止)
11
        3.通过router上的mapRoutes对象,配合当前的路由地址,搜索出所有路径相似的路由,获取到对应的组件
12
        4.将对应的组件通过createElement方法,生成虚拟DOM
13
*/
14
export default {
15
    name:"RouterView",
16
    functional:true,
17
    render:(_,{parent,props,data,children})=>{
18

19
        // 声明当前组件是router-view组件
20
        data.routerView = true;
21

22
        // 通过depth变量,记录当前是几级路由
23
        let depth=0;
24

25
        // 获取父组件创建虚拟DOM的方法
26
        let createElement = parent.$createElement;
27

28

29
        while(parent&&parent._routerRoot!=false){
30
            let vnodeData = parent.$vnode?parent.$vnode.data:{};
31
            if(vnodeData.routerView){
32
                // 在向上找的过程中,遇到一个router-view组件,就将depth+1,用来记录当前的router-view用来显示第几级路由
33
                depth++;
34
            }
35
            parent=parent.$parent;
36
        }
37

38
        //获取当前的路由地址
39
        let path = Vue.prototype.route.path;
40

41
        /*
42
            1.先提取出当前的路由注册表对象所有的key(也就是所有注册的路径),得到有路由路径组成的数组
43
            2.再从数组中过滤出,与当前路由地址相关的路径组成的数组
44
            (例如当前路由地址:/home/haha => 得到的数组["/home","/home/haha"])
45
        */
46
        let pathMap = Object.keys(Vue.prototype.router.mapRoute).filter((item)=>{
47
            return path.includes(item);
48
        });
49

50

51
        let currentPath = pathMap[depth];
52

53
        if(!currentPath)return;
54

55
        let component = Vue.prototype.router.mapRoute[currentPath];
56

57
        return createElement(component,data)
58
    }
59
}