vue-router解析

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

一个vue路由的工作流程


1、前端路由和后端路由的区别

后端路由
前端路由

后端路由时代,典型的mvc时代,前端路由是mvvm时代

2、vue-router工作流程

image

解析:
输入地址或者url改变,就会触发windows下面的监听事件,vue-router本身是一个对象,里面有current属性,current属性就会变化,比如 从首页路由/ 变成列表页路由 /list current就会变成/list,current又是被vue监视着的,也就是vue把vue-router的current变量当成自己的data一样在监视。然后更新vue,获取新的组件,渲染组件
问题:current是vue-router自己对象里的变量,如何被vue监听呢?衍生到自己使用,如何自己定义一个对象属性,触发vue的监听呢?

通过vue.util方法的defineReactive来监视,例子在下面会详细讲解

Hash和History


Hash和History的使用

Hash
  1. 后的就是Hash的内容
  2. 可以通过location.hash拿到
  3. 可以通过onhashchange监听hash的变化
History
  1. History即正常路径
  2. 可以通过location.pathname拿到
  3. 可以用onpopstate监听history的变化

vue插件基础知识


vuex,vue-router,element-ui都是插件

Vue.use去使用一个插件,并且会执行install方法

Vue.use(function(){
    console.log(1)
})  // 会执行,输出1
var a = function(){
    console.log(1)
}
a.install = function(){
    console.log('install')
}
Vue.use(a)  // 只会执行install
Vue.use()原理:
如果给它一个方法,它就会执行这个方法
但是无论你给它任何东西,只要上面有install属性,它就会执行install

Vue.mixin往vue的全局中混入自定义的操作

var a = function(){
    console.log(1)
}
a.install = function(vue){
    vue.mixin({
        data(){
            return {
                c: 123456  // 混入一个全局的data,在任何组件中都可以直接使用
            }
        },
        methods: {
            // 可以把一些常用的方法混入vue使用
            // 比如弹窗 消息弹窗
            globalMethods: function(){
                console.log('I am global')
            }
        },
        // 自定义生命周期,混入到所有的vue实例中
        // 所有的组件在created阶段都执行我们mixin的这个操作
        created(){
            console.log('I am created')
            console.log(this)  // this是指向当前组件的
        }
    })
}
Vue.use(a) 
补充:vue比较重要的api
1、vue.util

image

var a = function(){
    console.log(1)
}

var test = {
    testa: 1234
}

setTimeout(() => {
    test.testa = 4444
},2000)  // 发现是会变化,所以把本来属于window的对象可以触发vue的监听,衍生到vuex的state本身也不属于vue,却可以触发视图更新,原理相同

a.install = function(vue){
    
    vue.util.defineReactive(test,'testa');
    
    vue.mixin({
        beforeCreate(){
            this.test = test;
        }
    })
}
Vue.use(a) 
2、Vue.extend()

一般用来进行单元测试。

const Constructor = Vue.extend(HelloWorldComponent)
// 新建这个组件的构造函数,也就是组件里的this
const vm = new Constructor().$mount();
3、vue.util.extend()

其实就是进行了对象的合并,所以可以拿来拷贝

image

可以通过this.$options拿到new Vue时的参数

实现一个简单的vue-router


class History {
    constructor() {
        this.current = null;
    }
}

class vueRouter {
    constructor(options) {
        this.mode = options.mode || 'hash';
        this.routes = options.routes || [];
        this.routesMap = this.createMap(this.routes);
        this.history = new History();
        this.init();
    }

    init() {
        if (this.mode == 'hash') {
            // 自动加#号
            location.hash ? '' : location.hash = '/';
            window.addEventListener('load', () => {
                this.history.current = location.hash.slice(1);
            })
            window.addEventListener('hashchange', () => {
                this.history.current = location.hash.slice(1);
            })
        }
    }

    // 目的是把routes数组变成键值对对象
    createMap(routes) {
        return routes.reduce((memo, current) => {
            memo[current.path] = current.component;
            return memo;
        }, {})
    }
}

vueRouter.install = function(vue) {
    // 写插件注意要判断插件是否注册
    if (vueRouter.install.installed) return;
    vueRouter.install.installed = true;
    vue.mixin({
            beforeCreate() {
                if (this.$options && this.$options.router) {
                    this._root = this;
                    this._router = this.$options.router;
                    vue.util.defineReactive(this, 'current', this._router.history);
                } else {
                    this._root = this.$parent._root;
                }

                // 为什么我们在访问router实例的时候是使用this.$router
                // 为什么要这样设置?目的防止别人修改,只可读,不可改

                // this指向当前组件实例
                // 在this下注册一个属性
                Object.defineProperty(this, '$router', {
                    get() {
                        return this._root._router;
                    }
                })
            }
        })
        // router-view是vue自己注册的
    vue.component('router-view', {
        render(h) {
            let current = this._self._root._router.history.current;
            // 把current这个路径字符串,对应到各个组件上
            let routesMap = this._self._root._router.routesMap;
            return h(routesMap[current]);
        }
    })
}

export default vueRouter;
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看