前端入门之(vue-router全解析二)

末蓝、 2022-05-11 01:40 166阅读 0赞

前面一篇文章[ 前端入门之(vue-router全解析一)][_vue-router]我们简单的了解了一下vue-router的原理,今天我们继续vue-router,我们从头到尾的全部撸一遍哈.小伙伴开车啦,跟紧了哦~~

我这里以vue-cli+webpack创建的但页面工程为例子了哈,我们直接选带有vue-router的模版代码为demo.

先上一下vue-router的官网:  
[https://router.vuejs.org/zh/guide/\#javascript][https_router.vuejs.org_zh_guide_javascript]

在创建好的vue工程中,我们可以看到我们的main.js文件:

import router from './router'
    ....
    new Vue({
      el: '#app',
      router,
      store,
      render(h){
        return h(App)
      }
    })

然后是我们的router.js文件:

import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)
    
    export default new Router({
      mode:'hash',
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        }
      ]
    })

然后在App.vue中配置router-view:

就这么简单的几个操作,我们的vue-router就可以跑起来了,好啦! 我们转过头来一步一步的研究vue-router是怎么走起来的.

首先我们看我们的router.js文件:

Vue.use(Router)
    
    export default new Router({
    ...
     )}

我们看一下Vue.use(Router)干了什么~~

我们翻开vue-router的源码,找到install方法:

我们看到这么一段代码:

Vue.mixin({
        beforeCreate: function beforeCreate () {
          if (isDef(this.$options.router)) {
            this._routerRoot = this;
            this._router = this.$options.router;
            this._router.init(this);
            Vue.util.defineReactive(this, '_route', this._router.history.current);
          } else {
            this._routerRoot = (this.$parent && this.$parent._routerRoot) || this;
          }
          registerInstance(this, this);
        },
        destroyed: function destroyed () {
          registerInstance(this);
        }
      });

在混入中添加了两个生命周期方法,一个beforeCreate、一个destroyed,在beforeCreate我们可以看到一行代码:

Vue.util.defineReactive(this, '_route', this._router.history.current);

可以说这一行代码发挥的作用还是挺大的,先剧透一下, 这个方法就是给\_routerRoot也就是我们demo中的App.vue中的vue实例注册了一个动态变换属性“\_route”, 在上一节中我们知道,vue-router原理就是使用pushState跟hash来做路由切换,vue-router会根据location的变换来动态的改变"\_route"变量,而我们的"\_route"变量中包含了当前路由需要渲染的组件等信息,而在router-view中,"\_route"变量会当成属性传递给router-view,当\_route变换的时候,我们的router-view就会重新走render方法,然后render方法中再根据\_route中的当前组件,最后把当前页面渲染在页面.

好啦~!! 不知道小伙伴懂了没呢? 不懂也没关系,我们到时讲到vouter-view的时候还会走一遍代码,install方法最重要的也就是这一段代码了,我们继续往下走哈.

接着就是在Vue的原型中定义了两个属性 r o u t e r 跟 router跟 router跟route

Object.defineProperty(Vue.prototype, '$router', {
        get: function get () { return this._routerRoot._router }
      });
    
      Object.defineProperty(Vue.prototype, '$route', {
        get: function get () { return this._routerRoot._route }
      });

所以我们可以在Vue的所有实例中使用this. r o u t e r 跟 t h i s . router跟this. router跟this.route了,this.$router就是我们传递的router对象:

export default new Router({
      mode:'hash',
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },

this.$route是当前的route对象,其中包含了当前页面中的所有信息.

接着就是注册了两个全局组件了:

Vue.component('router-view', View);
      Vue.component('router-link', Link);

想必稍微了解过vue-router的小伙伴都知道这两个组件,router-view是router的根组件,所有的页面跳转都是基于router-view做跳转的.  
router-link则是vue-router提供的一个方便开发者使用api而封装的一个组件,童鞋们也可以不用router-link,自己走api的方式来实现路由跳转.

好啦~ 分析了好久才把install方法简单地分析完,嘿嘿,真是佩服写框架的大佬们.

分析完install方法,我们紧接着来说一下vue-router组件,我们可以在vue-router的源码中看到vue-router组件的代码:

代码有点多,我们捡重点的来分析,通过源码我们可以看到,router-view是一个无状态的组件,也就是设置了functional属性,在vue的官网中我们可以找到,当一个组件设置了functional属性后,这个组件也就是一个无状态的组件(也就是没有data)，无实例（没有 this 上下文）,要深入研究的童鞋可以去看一下vue的官网  
[https://cn.vuejs.org/v2/guide/render-function.html][https_cn.vuejs.org_v2_guide_render-function.html]

render: function render (_, ref) {
        ...
        var route = parent.$route;
    
    	...
        var matched = route.matched[depth];
    ...
    
        var component = cache[name] = matched.components[name];
    
    	...
        return h(component, data, children)
      }
    };

在render方法中,我们可以看到,首先去获取route对象,然后获取route对象中的当前页面component,最后通过render的h方法把component(当前页面)渲染出来.

所以当我们执行vue-router的push、replace、back、go等方法的时候,其实就是改变location然后再改变当前route对象,当route对象改变的时候,就会触发router-view的render方法,然后render方法根据route做页面切换. 好吧,说了半天,想必小伙伴也都累了,我们就以vue-router的push方法为例子走一遍整个流程.

push这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

VueRouter.prototype.push = function push (location, onComplete, onAbort) {
      this.history.push(location, onComplete, onAbort);
    };

因为vue-router中有hash跟history模式,我们就以HTML5History为例子了,我们找到HTML5History的push方法:

HTML5History.prototype.push = function push (location, onComplete, onAbort) {
        var this$1 = this;
    
        var ref = this;
        var fromRoute = ref.current;
        this.transitionTo(location, function (route) {
          pushState(cleanPath(this$1.base + route.fullPath));
          handleScroll(this$1.router, route, fromRoute, false);
          onComplete && onComplete(route);
        }, onAbort);
      };

幸好代码不是很多,我们可以看到最主要的就是执行了一个叫transitionTo的方法,我们点进去:

History.prototype.transitionTo = function transitionTo (location, onComplete, onAbort) {
        var this$1 = this;
    
      var route = this.router.match(location, this.current);
      this.confirmTransition(route, function () {
        this$1.updateRoute(route);
        onComplete && onComplete(route);
        this$1.ensureURL();
    
        // fire ready cbs once
        if (!this$1.ready) {
          this$1.ready = true;
          this$1.readyCbs.forEach(function (cb) { cb(route); });
        }
      }, function (err) {
        if (onAbort) {
          onAbort(err);
        }
        if (err && !this$1.ready) {
          this$1.ready = true;
          this$1.readyErrorCbs.forEach(function (cb) { cb(err); });
        }
      });
    };

然后可以看到,又执行了一个叫confirmTransition的方法,简单说一下confirmTransition方法,confirmTransition方法主要是用于处理一些导航守卫函数, 一个一个的遍历这些守卫函数,最后执行,直到执行完所有的过渡函数,最后回调在transitionTo方法中传递的函数

History.prototype.transitionTo = function transitionTo (location, onComplete, onAbort) {
        ...
      this.confirmTransition(route, function () {
        this$1.updateRoute(route);
       ...
      }, function (err) {
       ...
      });
    };

可以看到,当执行完confirmTransition方法后,执行了一行代码:

this$1.updateRoute(route);

这行代码是干什么的呢? 我们继续往下走:

History.prototype.updateRoute = function updateRoute (route) {
      var prev = this.current;
      this.current = route;
      this.cb && this.cb(route);
      this.router.afterHooks.forEach(function (hook) {
        hook && hook(route, prev);
      });
    };

可以看到,最主要的就是改变了current(也就是当前路由),然后执行了

this.cb && this.cb(route);

把当前路由传递给了cb方法,那么cb方法又是啥呢?找呀找呀,我们找到了HtmlHistory的父类:

History.prototype.listen = function listen (cb) {
      this.cb = cb;
    };

所以我们需要看一下listen方法在哪调用的,我们继续找呀找呀,最后在vue-router的init方法中找到了它:

VueRouter.prototype.init = function init (app /* Vue component instance */) {
       ....
    
      history.listen(function (route) {
        this$1.apps.forEach(function (app) {
          app._route = route;
        });
      });
    };

那么init方法又是哪调用的呢? 我们继续找呀找呀,最后在install方法中找到了init方法:

function install (Vue) {
      ...
      Vue.mixin({
        beforeCreate: function beforeCreate () {
          if (isDef(this.$options.router)) {
            this._routerRoot = this;
            this._router = this.$options.router;
            this._router.init(this);
            Vue.util.defineReactive(this, '_route', this._router.history.current);
          } else {
            ...
    }

我重点看init方法中的这段代码:

VueRouter.prototype.init = function init (app /* Vue component instance */) {
       ....
      history.listen(function (route) {
        this$1.apps.forEach(function (app) {
          app._route = route;
        });
      });
    };

遍历apps,然后给apps中的每个\_route对象重新赋值最新的route路由信息,apps是什么呢? 从install方法中我们可以看到,apps其实就是像App.vue中的vue实例的一个集合, 因为我们demo中的rootRouter就一个,所以apps集合中也就一个vue实例,也就是App.vue.

文章一开始我们就解析了vue-router的install方法,在install中给rootRouter定义了一个可以变化的属性"\_route":

Vue.util.defineReactive(this, '_route', this._router.history.current);

所以当\_route改变的时候,我们的的router-view重新走render方法,页面改变.

我们回到HTML5History的push方法:

前面分析我们直到,当我们执行完transitionTo方法的时候,其实我们的页面已经改变了,但是我们的链接地址还没变,所以接下来就调用了 pushState方法,在上一节中,我们已经认识了pushState方法了,所以我们点进去看看是不是跟我们上一节说的一样:

哈哈!! 我就不解释了哈,小伙伴感兴趣的可以去看我上一篇文章  
[https://blog.csdn.net/vv\_bug/article/details/82795248][_vue-router]

好啦,到这里vue-router的全部流程我们就简单的走完了,小伙伴要深入研究的自己可以去试着看看源码,也可以一起交流学习一下哈,嘿嘿!!! 最后还落了一个router-link组件, 好晚啦,实在写不动了,放到下一节了~

欢迎入群,欢迎交流,qq群链接:  
![在这里插入图片描述][SouthEast]

[_vue-router]: https://blog.csdn.net/vv_bug/article/details/82795248
[https_router.vuejs.org_zh_guide_javascript]: https://router.vuejs.org/zh/guide/#javascript
[https_cn.vuejs.org_v2_guide_render-function.html]: https://cn.vuejs.org/v2/guide/render-function.html
[SouthEast]: /images/20220511/df2368962b634b1b988e038ebc005388.png