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