《vue-router 源码04》<router-view />剖析

前端

2024-02-18 05:08:38

深入剖析 Vue.js 中的 <router-view /> 组件

什么是 <router-view />？

<router-view /> 是 Vue.js 路由系统中一个至关重要的组件。它负责动态呈现与当前激活路由关联的组件，使我们能够在应用程序中构建单页面应用（SPA）并实现无刷新页面切换。

<router-view /> 的工作原理

<router-view /> 组件是一个函数式组件，其 render 函数根据当前激活的路由信息获取要呈现的组件。此信息包括：

路由记录： 包含当前路由的元数据和关联组件的数组。
匹配路由： 包含当前路由与其父路由的数组。

props 属性

<router-view /> 提供了几个有用的 props 属性，可用于控制组件的呈现：

name： 要呈现的组件的名称。
render： 一个渲染函数，用于动态地呈现组件。
transition： 一个过渡效果，将在组件切换时应用。
key： 组件的键，用于跟踪其更新。

使用 <router-view />

要在 Vue.js 应用程序中使用 <router-view />，你需要在路由配置中定义路由映射，并为每个路由指定相应的组件。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

在上面的示例中，当用户访问 / 路径时，<router-view /> 将呈现 Home 组件，当用户访问 /about 路径时，<router-view /> 将呈现 About 组件。

示例代码

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

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')