使用
< div id = "app" >
< router-link to = 'home' >首页</ router-link >
< router-link to = 'about' >关于</ router-link >
< router-view a = 1 >< router-view />
</ div >
router-view组件
export default {
//函数式组件没有this 不能new 没有双向数据绑定，通常用的比较少，比较适用于展示详情页因为详情页只展示不进行修改等操作，函数式组件比有状态的组件更加轻量级。
functional: true ,
render(h,{parent,data}){
parent表示的父组件 app
data 是行间属性(上面代码a=1) 也可以使用prop传递
let route = parent.$route;
let depth = 0;
data.routerView = true ;
while (parent){
//$vnode指的是虚拟dom 如果app上有虚拟dom并且这个虚拟dom上的routerView为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);
}
}
router-link的实现
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>
}
}
到此这篇关于Vue router-view和router-link的实现原理的文章就介绍到这了,更多相关Vue router-view和router-link内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！
原文链接：https://segmentfault.com/a/1190000039369356
查看更多关于Vue router-view和router-link的实现原理的详细内容...