(精华)2020年7月19日 vue vue-router(手写版)

import Vue from 'vue'
// import VueRouter from 'vue-router'
import VueRouter from '../MYRouter/index.js'

Vue.use(VueRouter)// 执行install方法

const routes = [
  {
    path:'/',
    redirect:'/goods'
  },
  {
    path: '/goods',
    name: 'goods',
    component: () => import('../views/goods.vue')
  },
  {
    path: '/ratings',
    name: 'ratings',
    component: () => import('../views/ratings.vue')
  },
  {
    path: '/seller',
    name: 'seller',
    component: () => import('../views/seller.vue')
  },
]
//new执行构造函数
const router = new VueRouter({
  routes,
  linkActiveClass:'active'
})

export default router


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
 

自定义插件MYRouter的内部写法

//我们写插件的地方

let Vue ;

class MYRouter {
    static install(_Vue) {//use执行的函数
        Vue = _Vue;
        Vue.mixin({
            beforeCreate(){
                // const options = this.$options;
                //this -- vue实例化对象
                Vue.prototype.$rmrouter = '我是路由！'
                if(this.$options.router){
                    //this.$options.router 在vue实例化的时候被注入的router对象
                    this._router = this.$options.router
                    Vue.util.defineReactive(this._router, 'current', '/') ; //方式二
                    //这个是把_route加入数据监控，所以你可以watch到_route
                    this.$options.router.init();
                }
                
            }
        })
    }
    constructor(options){
        this.$options = options;
        this.routerMap = {}; 
        
        // this.currentPath = ''; //当前的path
        // 路由  -- 组件
        // test1  --- test1.vue
        // //方式一： 
        // this.app = new Vue({
        //     data(){
        //         return {
        //             //当前的路由
        //             current:'/'
        //         }
        //     }
        // });
   
       
    }
    init(){
        console.log('ppp');
        //1. 监听hash的变化
            this.initEvents();
        //2. 处理路由routerMap
            this.createRouterMap();
        //3 . 初始化组件  ， router-link, router-view
            this.initComponent();
        //4.路由守卫
    }
     //1. 监听hash的变化
    initEvents(){
        window.addEventListener('hashchange',this.onHashChange.bind(this),false)
        window.addEventListener('load',this.onHashChange.bind(this),false)
    }
    //2. 处理路由routerMap
    createRouterMap(){
        // this.routerMap = {
        //     '/goods':'component',
        //     '/goods1':'component1',
        // }
        this.$options.routes.forEach((item)=>{
            this.routerMap[item.path] = item;
        })
    }

    onHashChange(e){
        console.log('我监听到路由变化了');
        //获取hash
        let hash = location.hash.slice(1) || '/';
        this.current = hash; //方式一
    }
    //3 . 初始化组件  ， router-link, router-view
    initComponent(){
        Vue.component('router-link',{
            // props:['to'],
            props:{
                to:String
            },
            render:function(h){
                // h-- createElemnt
                //  3个参数
                //  dom节点名
                //  属性
                //  子元素
                return h('a',{
                    attrs:{
                        href:'#'+this.to
                    }
                },[this.$slots.default])
            }
        });

        Vue.component('router-view',{
            render:h=>{
                console.log('ppp');
                // console.log(this.app.current); //方式一
                //this vuerouter实例化构造函数的对象
                
                let component = this.routerMap[this.current].component;
                return h(component);
            }
        })

    }

}
export default MYRouter;


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
  
57
  
58
  
59
  
60
  
61
  
62
  
63
  
64
  
65
  
66
  
67
  
68
  
69
  
70
  
71
  
72
  
73
  
74
  
75
  
76
  
77
  
78
  
79
  
80
  
81
  
82
  
83
  
84
  
85
  
86
  
87
  
88
  
89
  
90
  
91
  
92
  
93
  
94
  
95
  
96
  
97
  
98
  
99
  
100
  
101
  
102
  
103
  
104
  
105
  
106
  
107
  
108
  
109
  
110
  
111
 

文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。

原文链接：codeboy.blog.csdn.net/article/details/107440503