VueRouter源码解析（三）：router-link/router-view组件深入剖析

2023-09-30 08:11:11

大家好，我是[您的名字]，欢迎来到VueRouter源码解析系列文章的第三篇。在前面两篇文章中，我们深入探讨了vue-router的基本原理、路由匹配策略和导航守卫。今天，我们将把目光转向两个至关重要的组件：router-link和router-view。这两个组件是vue-router中不可或缺的，它们负责处理路由导航和渲染视图。

router-link组件

router-link组件是vue-router提供的用于导航的组件。它类似于普通的标签，但是它能以一种vue的方式处理路由导航。让我们看看router-link组件的实现：

// src/components/router-link.js

export default {
  name: 'RouterLink',
  props: {
    to: {
      type: [String, Object],
      required: true
    }
  },
  render(createElement) {
    const router = this.$router
    const href = router.resolve(this.to).href

    const clickHandler = e => {
      e.preventDefault()
      router.push(this.to)
    }

    return createElement('a', {
      attrs: {
        href,
        onClick: clickHandler
      }
    }, this.$slots.default)
  }
}

如你所见，router-link组件本质上是一个标签，它会阻止默认的浏览器导航，并调用路由器的push方法来触发导航。

router-view组件

router-view组件是vue-router提供的用于渲染视图的组件。它是一个占位符组件，它将渲染当前路由匹配的组件。让我们看看router-view组件的实现：

// src/components/router-view.js

export default {
  name: 'RouterView',
  functional: true,
  render(createElement, { children, parent, data }) {
    const route = parent.$route
    const depth = parent.$vnode.data.routerViewDepth

    const matched = route.matched[depth]
    const component = matched && matched.component

    return createElement(component, data, children)
  }
}

router-view组件是一个函数式组件，这意味着它是一个纯函数，不保存任何状态。它使用createElement函数动态创建组件实例。通过检查当前路由匹配，它可以渲染出正确的组件。

示例

现在我们已经了解了router-link和router-view组件的工作原理，让我们看一个简单的示例来了解它们如何在实践中工作。

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

    <router-view />
  </div>
</template>

<script>
import { Vue, Router } from 'vue-router'

new Vue({
  router: new Router({
    routes: [
      { path: '/', component: Home },
      { path: '/about', component: About }
    ]
  })
}).$mount('#app')
</script>