正文

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

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0720

这篇文章主要介绍了Vue router-view和router-link的实现原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

使用

?
1
2
3
4
5
<div id="app">
  <router-link to='home'>首页</router-link>
  <router-link to='about'>关于</router-link>
  <router-view a=1><router-view/>
 </div>

router-view组件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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的实现

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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内容请搜索米米素材网以前的文章或继续浏览下面的相关文章希望大家以后多多支持米米素材网！

原文链接：https://segmentfault.com/a/1190000039369356