The implementation principle of Vue router-view and router-link

<div id="app">
  <router-link to='home'>Home</router-link>
  <router-link to='about'>About</router-link>
  <router-view a=1><router-view/>
 </div>

export default {
//Functional components do not have this, cannot be new, and do not have two-way data binding. They are usually used less frequently and are more suitable for displaying detail pages because the detail pages only display and do not modify or perform other operations. Functional components are lighter than stateful components.
  functional:true,
  render(h,{parent,data}){
  parent represents the parent component app
  data is an inline attribute (a=1 in the above code) and can also be passed using prop let route = parent.$route;
    let depth = 0;
    data.routerView = true;
    while(parent){ 
    //$vnode refers to the virtual dom. If there is a virtual dom on the app and the routerView on this virtual dom is true
      if (parent.$vnode && parent.$vnode.data.routerView){
        depth++; 
      }
      parent = parent.$parent;
    }
    let record = route.matched[depth];
    if(!record){
      return h();
    }
    return h(record.component, data);
  }
}

export default {
  props:{
    to:{
      type:String,
      required:true
    },
    tag:{
      type:String
    }
  },
  render(h){
    let tag = this.tag || 'a';
    let handler = ()=>{
      this.$router.push(this.to);
    }
    return <tag onClick={handler}>{this.$slots.default}</tag>
  }
}