Vue路由实现:router-view和router-link的实现原理

Posted 2021-09-25 mengyuhang4879

使用

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