VueRouter源码（三）--RouterView， RouterLink

分手后的思念是犯贱 2024-04-18 20:03 97阅读 0赞

## 注册为vue组件 ##

RouterView 和RouterLink组件在install方法中注册成了Vue的组件

function install (Vue) { 
      ...
      Vue.component('RouterView', View);
      Vue.component('RouterLink', Link);
      ...
    }

--------------------

## RouterView ##

vue-router.js line45

**主要作用：** 在RouterView里渲染需要显示的组件

var View = {  
    	name: 'RouterView',
    	functional: true,
    	props:{ 
    		name: { 
    			type: String,
    			default: 'default'
    		}
    	},
    	render:function(_, ref){ 
    		var props = ref.props;
    	    var children = ref.children;
    	    var parent = ref.parent;
    	    var data = ref.data;
    
    		var h = parent.$createElement; //用于创建DOM
    		var cache = parent._routerViewCache || (parent._routerViewCache = { });
    		var route = parent.$route;
    		
    		//遍历父节点，找到顶级节点
    		while (parent && parent._routerRoot !== parent) { 
    	      var vnodeData = parent.$vnode && parent.$vnode.data;
    	      if (vnodeData) { 
    	        if (vnodeData.routerView) { 
    	          depth++;
    	        }
    	        if (vnodeData.keepAlive && parent._inactive) { 
    	          inactive = true;
    	        }
    	      }
    	      parent = parent.$parent;
    	    }
    	    //如果dom树是keep-alive状态，直接渲染
    	    if (inactive) { 
    	      return h(cache[name], data, children)
    	    }
    	    //从路由的matched列表中获取当前的record（传入路由实例的routes数组，包含name, components, redirect, path等属性）
    	    var matched = route.matched[depth];
    	    // 如果没有找到匹配路由，渲染一个空节点并返回
    	    if (!matched) { 
    	      cache[name] = null;
    	      return h()
    	    }
    	    //否则查找匹配到的路由中的组件
    	    //获取要渲染的组件
    	    var component = cache[name] = matched.components[name];
    	    ...
    	    //处理props
    	    var propsToPass = data.props = resolveProps(route, matched.props && matched.props[name]);
    	    if (propsToPass) { 
    	      // clone to prevent mutation
    	      propsToPass = data.props = extend({ }, propsToPass);
    	      // 略过没有声明的属性
    	      var attrs = data.attrs = data.attrs || { };
    	      for (var key in propsToPass) { 
    	        if (!component.props || !(key in component.props)) { 
    	          attrs[key] = propsToPass[key];
    	          delete propsToPass[key];
    	        }
    	      }
    	    }
    		//渲染组件
    	    return h(component, data, children)
    	}
    }

--------------------

## RouterLink ##

line 1005

**主要作用：**

1.  处理子组件样式
2.  根据传入的event属性，处理事件监听,包装成on：\{事件名： 回调\}
3.  默认渲染出一个a标签包裹中包裹的内容，并给这个a标签添加指定事件的回调（默认click，然后触发router实例的router或push方法）
4.  如果指定了tag属性，且不是‘a’标签，那么首先会从包裹的子元素中寻找到第一个a标签，给他添加事件和属性。如果没有找到，那么就把事件和属性绑定到tag指定的元素上。

var Link = { 
      name: 'RouterLink',
      props: { 
        to: { 
          type: toTypes, // [String, Object]
          required: true
        },
        tag: { 
          type: String,
          default: 'a' //默认a标签
        },
        exact: Boolean,
        append: Boolean,
        replace: Boolean,
        activeClass: String,
        exactActiveClass: String,
        event: { 
          type: eventTypes, //[String, Array]
          default: 'click' //默认click触发跳转事件
        }
      },
      render: function render (h) { 
    	// this-> vue
        var router = this.$router; //路由实例
        var current = this.$route; //当前路由对象
        /** resolve()返回值 *return { *location: location, *route: route, *href: href, *normalizedTo: location, *resolved: route *} */
        var ref = router.resolve(
          this.to,
          current,
          this.append
        );
        var location = ref.location;
        var route = ref.route;
        var href = ref.href;
    
        //省略..处理样式class
    
        var compareTarget = route.redirectedFrom
          ? createRoute(null, normalizeLocation(route.redirectedFrom), null, router)
          : route;
    
        //依然省略..样式处理
    	//事件回调
        var handler = function (e) { 
          if (guardEvent(e)) { 
          //追加或替换历史记录
            if (this$1.replace) { 
              router.replace(location, noop);
            } else { 
              router.push(location, noop);
            }
          }
        };
        //补充guardEvent
        function guardEvent (e) { 
    	  // 控制键不处理
    	  if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) {  return }
    	  // 如果已经禁用默认 不处理
    	  if (e.defaultPrevented) {  return }
    	  // 右击不处理
    	  if (e.button !== undefined && e.button !== 0) {  return }
    	  // 如果target属性是_blank 不处理
    	  if (e.currentTarget && e.currentTarget.getAttribute) { 
    	    var target = e.currentTarget.getAttribute('target');
    	    if (/\b_blank\b/i.test(target)) {  return }
    	  }
    	  // this may be a Weex event which doesn't have this method
    	  if (e.preventDefault) { 
    	    e.preventDefault();
    	  }
    	  return true
    	}
        //补充结束
    
        var on = {  click: guardEvent }; //guardEvent 返回true或undefined
        if (Array.isArray(this.event)) {  //event默认是click，可以自行制定，格式是[String, Array]
          this.event.forEach(function (e) { 
            on[e] = handler; //如果是数组，依次触发事件
          });
        } else { 
          on[this.event] = handler;
        }
    
        var data = {  class: classes };
    	//插槽作用域
        var scopedSlot =
          !this.$scopedSlots.$hasNormal &&
          this.$scopedSlots.default &&
          this.$scopedSlots.default({ 
            href: href,
            route: route,
            navigate: handler,
            isActive: classes[activeClass],
            isExactActive: classes[exactActiveClass]
          });
    
        if (scopedSlot) { 
          if (scopedSlot.length === 1) { 
            return scopedSlot[0]
          } else if (scopedSlot.length > 1 || !scopedSlot.length) { 
            ...警告处理
            return scopedSlot.length === 0 ? h() : h('span', { }, scopedSlot) //如果是空数组，渲染一个空节点，否则一个空的span节点
          }
        }
    	//处理包裹标签 默认是A 标签
        if (this.tag === 'a') { 
          data.on = on;
          data.attrs = {  href: href };
        } else { 
          // 查找子标签中第一个A标签，并绑定回调和href属性到这个A标签上
          var a = findAnchor(this.$slots.default);
          if (a) { 
            // 如果有A 标签
            a.isStatic = false;
            var aData = (a.data = extend({ }, a.data));
            aData.on = on;
            var aAttrs = (a.data.attrs = extend({ }, a.data.attrs));
            aAttrs.href = href;
          } else { 
            // 如果没有找到<a>,事件回调绑定到自身
            data.on = on;
          }
        }
    	//渲染标签
        return h(this.tag, data, this.$slots.default)
      }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，97人围观）

还没有评论，来说两句吧...

相关阅读

相关 VueRouter源码（三）--RouterView， RouterLink

注册为vue组件 RouterView 和RouterLink组件在install方法中注册成了Vue的组件 function install (Vue) ...

分手后的思念是犯贱/ 2024年04月18日 20:03/ 0 赞/ 98 阅读

相关【Vue Router】017-扩展 RouterLink*

1.17 扩展 RouterLink\ 1.17.1 概述 RouterLink 组件提供了足够的 `props` 来满足大多数基本应用程序的需求，但它并未尝试涵盖

女爷i/ 2023年10月01日 11:36/ 0 赞/ 25 阅读

相关【RocketMQ源码】三、Producer 源码学习

一、启动流程 1.1 默认启动类解析 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

谁借莪１个温暖的怀抱￠/ 2023年02月26日 10:24/ 0 赞/ 45 阅读

相关 ByteBuf源码分析（三十三）

今天进行ByteBuf源码分析：一、前言简介：当我们进行数据传输的时候，往往需要使用到缓冲区，常用的缓冲区就是 JDK NIO 类库提供的 java.nio.Buf

冷不防/ 2022年10月29日 14:23/ 0 赞/ 239 阅读

相关鸿蒙源码分析（三十三）

ecdh算法详解一、算法概述通过椭圆曲线 Diffie-Hellman (ECDH) 密钥协商协议，两个用户可以创建共享的机密协议。他们可以在不安全的公共媒体上

女爷i/ 2022年09月05日 00:20/ 0 赞/ 249 阅读

相关 cartographer 源码解析 (三)

相关链接： [cartographer 源码解析(一)][cartographer] [cartographer 源码解析(二)][cartographer 1]

分手后的思念是犯贱/ 2022年08月31日 05:56/ 0 赞/ 311 阅读

相关 openMPM源码分析（三）

函数 int32\_t sync\_test\_lock(void) \- 一、主要涉及两个函数mpm\_sync\_lock\_acquire(void\lock,in

柔光的暖阳◎/ 2022年08月06日 12:22/ 0 赞/ 251 阅读

相关 node源码详解（三）

本作品采用[知识共享署名 4.0 国际许可协议][4.0]进行许可。转载保留声明头部与原文链接[https://luzeshu.com/blog/nodesource3][h

电玩女神/ 2022年06月16日 05:22/ 0 赞/ 196 阅读

相关 vue-router源码浅显分析（一）--Vue.use(VueRouter), new VueRouter(options)，HashHistory

1，vue中使用vueRouter需要通过vue.use(vueRouter)，众所周知，这里实际上调用了VueRouter的install方法，对Vue进行了扩展，vueR

朴灿烈づ我的快乐病毒、/ 2022年03月18日 08:44/ 0 赞/ 387 阅读

相关 ARouter源码分析（三）—— Provider源码分析

> `Arouter`源码分析系列建议从最初开始阅读，全部文章请访问[https://github.com/AlexMahao/ARouter][https_github.co

我会带着你远行/ 2022年02月13日 23:45/ 0 赞/ 491 阅读