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