export default {
  // 函数式组件可以节省性能，缺点是没有实例了，不能使用this
  functional: true,
  name: 'router-view',
  /* 
  data 传递给组件的整个数据对象
  parent 对父组件的引用
  */
  render(h, {data, parent}) {
    let route = parent.$route // 会做依赖收集
    let depth = 0
    // 获取匹配的路由，如地址栏输入：/about/info 输出 [{path:'/about',...}, {path: '/about/history',...}]
    let records = route.matched
    data.routerView = true // 渲染router-view时标记它是一个router-view

    while(parent){ // 根据matched 渲染对应的router-view
      if (parent.$vnode && parent.$vnode.data.routerView){
          depth++;
      }
      parent = parent.$parent;
    }

    let record = route.matched[depth];
    // 如果没有匹配的记录渲染空值
    if(!record){
        return h();
    }

    // records[depth].component 渲染第几个路由
    return h(records[depth].component, data)
  }
}
/* 
$vonde 和 _vnode 的区别？

$vnode 指的是组件

_vnode 表示组件中的内容
*/