VueRouter源码（三）--RouterView， RouterLink

注册为vue组件

RouterView 和RouterLink组件在install方法中注册成了Vue的组件

function install (Vue) {
   
  ...
  Vue.component('RouterView', View);
  Vue.component('RouterLink', Link);
  ...
}

---

RouterView

vue-router.js line45

主要作用： 在RouterView里渲染需要显示的组件

var View = {
    
	name: 'RouterView',
	functional: true,
	props:{
   
		name: {
   
			type: String,
			default: 'default'
		}
	},
	render:function(_, ref){
   
		var props = ref.props;
	    var children = ref.children;
	    var parent = ref.parent;
	    var data = ref.data;

		var h = parent.$createElement; //用于创建DOM
		var cache = parent._routerViewCache || (parent._routerViewCache = {
   });
		var route = parent.$route;
		
		//遍历父节点，找到顶级节点
		while (parent && parent._routerRoot !== parent) {
   
	      var vnodeData = parent.$vnode && parent.$vnode.data;
	      if (vnodeData) {
   
	        if (vnodeData.routerView) {
   
	          depth++;
	        }
	        if (vnodeData.keepAlive && parent._inactive) {
   
	          inactive = true;
	        }
	      }
	      parent = parent.$parent;
	    }
	    //如果dom树是keep-alive状态，直接渲染
	    if (inactive) {
   
	      return h(cache[name], data, children)
	    }