Vue-Router 源码解析(五) router-link组件的用法及原理

    <div id="app">
        <router-link to="/info/1">详情页1</router-link>     
        <router-link to="/info/2" event="mouseover">详情页2</router-link>       
        <router-link to="/info/3" tag="p">详情页3</router-link>     
        <hr/>
        <router-view></router-view>
    </div>
    <script>                   
        const info  = { template:'<div>id:{{this.$route.params.id}}</div>'}
        const routes = [                                   
            {path:'/info/:id',component:info,name:'info'},
        ]
        const app = new vue({                                                     
            el:'#app',
            router:new vuerouter({routes})
        })
    </script>

var link = {
  name: 'routerlink',
  props: {                          //可以传入的props
    to: {
      type: totypes,
      required: true
    },
    tag: {
      type: string,
      default: 'a'
    },
    exact: boolean,
    append: boolean,
    replace: boolean,
    activeclass: string,
    exactactiveclass: string,
    event: {
      type: eventtypes,
      default: 'click'                      //默认为click事件
    }
  },
  render: function render (h) {       //router-link组件对应的render函数   h等于大vue上的$createelement函数
    var this$1 = this;

    var router = this.$router;                                //获取$router实例
    var current = this.$route;                                //当前的路由对象 
    var ref = router.resolve(this.to, current, this.append);
    var location = ref.location;                              //要跳转的地址，是一个对象    ;例如:{_normalized: true, path: "/login", query: {…}, hash: ""} 
    var route = ref.route;                                    //路由对象
    var href = ref.href;                                      //href属性
 
    var classes = {};                                         //这段代码和linkactiveclass、linkexactactiveclass的配置有关
    var globalactiveclass = router.options.linkactiveclass;
    var globalexactactiveclass = router.options.linkexactactiveclass;
    // support global empty active class
    var activeclassfallback = globalactiveclass == null
      ? 'router-link-active'
      : globalactiveclass;
    var exactactiveclassfallback = globalexactactiveclass == null
      ? 'router-link-exact-active'
      : globalexactactiveclass;
    var activeclass = this.activeclass == null
      ? activeclassfallback
      : this.activeclass;
    var exactactiveclass = this.exactactiveclass == null
      ? exactactiveclassfallback
      : this.exactactiveclass;
    var comparetarget = location.path
      ? createroute(null, location, null, router)
      : route;

    classes[exactactiveclass] = issameroute(current, comparetarget);
    classes[activeclass] = this.exact
      ? classes[exactactiveclass]
      : isincludedroute(current, comparetarget);

    var handler = function (e) {                          //绑定的事件
      if (guardevent(e)) {                                  //先调用该函数过滤掉一些和导航无关的事件
        if (this$1.replace) {                               //如果设置了replace属性
          router.replace(location);                           //则执行router.replace切换导航
        } else {
          router.push(location);                              //否则执行router.push更新导航
        }
      }
    };

    var on = { click: guardevent };                               //<router-link>组件默认都支持的click事件,下面会重置的
    if (array.isarray(this.event)) {
      this.event.foreach(function (e) { on[e] = handler; });
    } else {
      on[this.event] = handler;
    }

    var data = {                                              //一般情况下，这里会重置on.click为handler
      class: classes
    };

    if (this.tag === 'a') {                                   //如果tag是一个a标签
      data.on = on;
      data.attrs = { href: href };
    } else {                                                  //如果是其它标签          
      // find the first <a> child and apply listener and href
      var a = findanchor(this.$slots.default);                  //查找第一个<a>标签
      if (a) {                                                  //如果找到了一个a标签
        // in case the <a> is a static node
        a.isstatic = false;
        var adata = a.data = extend({}, a.data);
        adata.on = on;
        var aattrs = a.data.attrs = extend({}, a.data.attrs);
        aattrs.href = href;
      } else {                                                  //如果没有找到a标签
        // doesn't have <a> child, apply listener to self
        data.on = on;                                             //则监听自身
      }
    }

    return h(this.tag, data, this.$slots.default)             //最后调用$createelement去创建该vnode
  }
}