前端入门之(vue-router全解析三)

最新推荐文章于 2025-06-02 09:03:17 发布

原创

最新推荐文章于 2025-06-02 09:03:17 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

本文深入解析Vue Router，重点分析router-link组件的工作原理及动态路由匹配。通过示例代码展示如何创建和切换页面，以及在路由变化时更新数据。此外，介绍了路由组件传参、导航守卫的使用，帮助读者更好地理解和运用Vue Router。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一节前端入门之(vue-router全解析二)我们带着vue-router的push方法走了一遍源码,然后还分析了router-view的源码,最后还差router-link组件没有分析了,我们今天继续vue-router解析.

我们在源码中找到router-link组件的代码:

var Link = {
  name: 'router-link',
  props: {
    to: {
      type: toTypes,
      required: true
    },
    tag: {
      type: String,
      default: 'a'
    },
    exact: Boolean,
    append: Boolean,
    replace: Boolean,
    activeClass: String,
    exactActiveClass: String,
    event: {
      type: eventTypes,
      default: 'click'
    }
  },
  render: function render (h) {
    var this$1 = this;

    var router = this.$router;
    var current = this.$route;
    var ref = router.resolve(this.to, current, this.append);
    var location = ref.location;
    var route = ref.route;
    var href = ref.href;

    var classes = {};
    var globalActiveClass = router.options.linkActiveClass;
    var globalExactActiveClass = router.options.linkExactActiveClass;
    // Support global empty active class
    var activeClassFallback = globalActiveClass == null
            ? 'router-link-active'
            : globalActiveClass;
    var exactActiveClassFallback = globalExactActiveClass == null
            ? 'router-link-exact-active'
            : globalExactActiveClass;
    var activeClass = this.activeClass == null
            ? activeClassFallback
            : this.activeClass;
    var exactActiveClass = this.exactActiveClass == null
            ? exactActiveClassFallback
            : this.exactActiveClass;
    var compareTarget = location.path
      ? createRoute(null, location, null, router)
      : route;

    classes[exactActiveClass] = isSameRoute(current, compareTarget);
    classes[activeClass] = this.exact
      ? classes[exactActiveClass]
      : isIncludedRoute(current, compareTarget);

    var handler = function (e) {
      if (guardEvent(e)) {
        if (this$1.replace) {
          router.replace(location);
        } else {
          router.push(location);
        }
      }
    };

    var on = { click: guardEvent };
    if (Array.isArray(this.event)) {
      this.event.forEach(function (e) { on[e] = handler; });
    } else {
      on[this.event] = handler;
    }

    var data = {
      class: classes
    };

    if (this.tag === 'a') {
      data.on = on;
      data.attrs = { href: href };
    } else {
      // find the first <a> child and apply listener and href
      var a = findAnchor(this.$slots.default);
      if (a) {
        // in case the <a> is a static node
        a.isStatic = false;
        var extend = _Vue.util.extend;
        var aData = a.data = extend({}, a.data);
        aData.on = on;
        var aAttrs = a.data.attrs = extend({}, a.data.attrs);
        aAttrs.href = href;
      } else {
        // doesn't have <a> child, apply listener to self
        data.on = on;
      }
    }

    return h(this.tag, data, this.$slots.default)
  }
};

function guardEvent (e) {
  // don't redirect with control keys
  if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) { return }
  // don't redirect when preventDefault called
  if (e.defaultPrevented) { return }
  // don't redirect on right click
  if (e.button !== undefined && e.button !== 0) { return }
  // don't redirect if `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
}

代码不是很多,我们直接结合demo展示下router-view跟router-link组件,先简单看一下我们要实现的需求:
在这里插入图片描述

可以看到,页面就两个tab按钮,然后点击每个tab按钮的时候切换不同的页面内容.

我们首先创建两个页面a页面跟b页面:

page-a.vue:

<template>
  <div id="page-a-container">
    我是a页面
  </div>
</template>
<script>

</script>
<style scoped>
  #page-a-container{
    background-color: red;
    color: white;
    font-size: 24px;
    height: 100%;
  }
</style>

page-b.vue:

<template>
  <div id="page-b-container">
    我是b页面
  </div>
</template>
<script>

</script>
<style scoped>
  #page-b-container{
    background-color: yellow;
    color: black;
    font-size: 24px;
    height: 100%;
  }
</style>

然后