微客导航 » 文章资讯 » Vue router-view和router-link的实现原理

Vue router-view和router-link的实现原理

2023-07-04 13:04:03 196

使用


首页
关于

router-view组件

exportdefault{
//函数式组件没有this不能new没有双向数据绑定，通常用的比较少，比较适用于展示详情页因为详情页只展示不进行修改等操作，函数式组件比有状态的组件更加轻量级。
functional:true,
render(h,{parent,data}){
parent表示的父组件app
data是行间属性(上面代码a=1)也可以使用prop传递
letroute=parent.$route;
letdepth=0;
data.routerView=true;
while(parent){
//$vnode指的是虚拟dom如果app上有虚拟dom并且这个虚拟dom上的routerView为true
if(parent.$vnode&&parent.$vnode.data.routerView){
depth++;
}
parent=parent.$parent;
}
letrecord=route.matched[depth];
if(!record){
returnh();
}
returnh(record.component,data);
}
}

router-link的实现

exportdefault{
props:{
to:{
type:String,
required:true
},
tag:{
type:String
}
},
render(h){
lettag=this.tag||'a';
lethandler=()=>{
this.$router.push(this.to);
}
return{this.$slots.default}
}
}

到此这篇关于Vuerouter-view和router-link的实现原理的文章就介绍到这了,更多相关Vuerouter-view和router-link内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

Vue router-view和router-link的实现原理

热门推荐

随机推荐