这篇文章主要介绍了Vue router-view和router-link的实现原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用
首页 关于
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 {this.$slots.default} } } 以上就是Vue router-view和router-link的实现原理的详细内容，更多请关注0133技术站其它相关文章！
