(精华2020年5月16日更新) vue实战篇 mixin插件开发

插件开发以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

自定义插件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;