vue router 学习

需要准备以下知识:
1.es6 class构造函数 和 constructor构造器相关知识 https://es6.ruanyifeng.com/#docs/class
2.Vue组件化方法Vue.component和Vue.extend用法
vue 组件创建的方法:

  1. component方法(平常用的比较多的方法)
  2. extend方法

3.Vue.util工具类(重点是Vue.util.defineReactive()) https://www.kancloud.cn/diaoyundexia/text/181108

4.Vue.use() https://segmentfault.com/a/1190000012296163
5.Vue混入mixins https://cn.vuejs.org/v2/guide/mixins.html
6.render函数 https://blog.csdn.net/GGGyp/article/details/102685791
7.h5新增的hashchange事件

let Vue
class yrouter {
    constructor(options) {
        this.$options = options
        // this.current = '/'
        // Object.defineProperty(this, 'current' , {
        //     value: '/',
        //     writable: true
        // })

        Vue.util.defineReactive(this, 'current', '/')

        this.routerMap = {}
        options.routes.forEach(item => {
            this.routerMap[item.path] = item.component
        })
        window.addEventListener('hashchange', () => {
            this.current = window.location.hash.slice(1)
        })
    }
}

yrouter.install= function (_Vue) {
    console.log(this)
    Vue = _Vue
    Vue.mixin({
        beforeCreate() {
            if(this.$options.router){
                Vue.prototype.$router = this.$options.router
            }
        }
    })
    Vue.component('router-link' , {
        props: {
            to : {
                type: String,
                required: true
            }
        },
        render(h) {
            return h('a', {attrs: {href: '#' + this.to}}, this.$slots.default)
        }
    })

    Vue.component('router-view' , {
        render(h) {
            let comp = this.$router.routerMap[this.$router.current] || null
            return h(comp)
        }
    })
}
export default yrouter

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页