关于vue.js:Vue路由实现四routerview和routerlink的实现原理

应用

<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>
    }
}