前端路由探究(2) vue-router源码学习-两大组件

使用vue-router时候，肯定会使用router-link和router-view两个组件，其中router-view是作为路由的替换区域，router-link是作为路由的导航区域。

router-view

这个组件的功能很简单，就是拿到当前匹配的组件，然后返回渲染出来就好。
打开工程文件夹/src/components/vies.js

//parent为挂载的父元素
// depth为当前组件的深度
 let depth = 0
 let inactive = false
 while (parent && parent._routerRoot !== parent) {
      if (parent.$vnode && parent.$vnode.data.routerView) {
        depth++
      }
      //处理kept-alive的逻辑
      if (parent._inactive) {
        inactive = true
      }
      parent = parent.$parent
 }
 data.routerViewDepth = depth

  // render previous view if the tree is inactive and kept-alive
  if (inactive) {
    return h(cache[name], data, children)
  }
  //取得route的匹配项
  const matched = route.matched[depth]
    // render empty node if no matched route
  if (!matched) {
      cache[name] = null
      return h()
  }

  const component = cache[name] = matched.components[name]

主要代码如上，英文是本来的注释，后面就是处理props的一些东西，最后返回

return h(component, data, children);

router-link

先看一下props：

  props: {
   //要转向的路径
    to: {
      type: toTypes,
      required: true
    },
//生成的html标签，默认为<a>
    tag: {
      type: String,
      default: 'a'
    },
    // 完整模式，如果为 true 那么也就意味着
    // 绝对相等的路由才会增加 activeClass
    // 否则是包含关系
    exact: Boolean,
   //添加的路径
    append: Boolean,
    replace: Boolean,
  //链接激活和跳转的css class名称
    activeClass: String,
    exactActiveClass: String,
  //绑定的事件
    event: {
      type: eventTypes,
      default: 'click'
    }
  }

如何绑定事件

    const handler = e => {
      if (guardEvent(e)) {
        if (this.replace) {
          router.replace(location)
        } else {
          router.push(location)
        }
      }
    }

    const on = { click: guardEvent }
    if (Array.isArray(this.event)) {
      this.event.forEach(e => { on[e] = handler })
    } else {
      on[this.event] = handler
    }

生成html标签，并且绑定事件

    if (this.tag === 'a') {
      data.on = on
      data.attrs = { href }
    } else {
      // find the first <a> child and apply listener and href
      const a = findAnchor(this.$slots.default)
      if (a) {
        // in case the <a> is a static node
        a.isStatic = false
        const extend = _Vue.util.extend
        const aData = a.data = extend({}, a.data)
        aData.on = on
        const aAttrs = a.data.attrs = extend({}, a.data.attrs)
        aAttrs.href = href
      } else {
        // doesn't have <a> child, apply listener to self
        data.on = on
      }
   }