vue路由实现（四）：router-view和router-link的实现原理

router-viewcomponentexportdefault{//功能组件没有这个，不能新建。没有双向数据绑定，平时用的比较少，更适合展示详情页，因为详情页只展示，不做修改等操作，功能组件比有状态组件更轻量。functional:true,render(h,{parent,data}){parent表示的父组件appdata是一个interline属性（上面代码中的a=1）也可以使用prop传递letroute=parent.$route;让深度=0；data.routerView=true;while(parent){//$vnode指的是虚拟dom如果app上有虚拟dom，并且这个虚拟dom上的routerView为trueif(parent.$vnode&&parent.$vnode.data.routerView){depth++;}parent=parent.$parent;}letrecord=route.matched[depth];if(!record){返回h();}返回h(record.component,data);}}router-linkexportdefault{props:{to:{type:String,required:true},tag:{type:String}},render(h){让tag=this.tag||'A';让处理程序=()=>{this.$router.push(this.to);}返回{this.$slots.default}}}