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

使用

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内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• vue router-view的嵌套显示实现
• 解决vue更新路由router-view复用组件内容不刷新的问题
• vue中的router-view组件的使用教程
• vue2 设置router-view默认路径的实例
• vue实现同一个页面可以有多个router-view的方法
• vue2.0 路由不显示router-view的解决方法
• vue-router 中router-view不能渲染的解决方法
• vue 路由视图 router-view嵌套跳转的实现

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！