RouterView 组件 | Vue Router API

概述

RouterView 是 Vue Router 的核心组件，用于渲染当前路由匹配的组件。它是单页应用中视图切换的关键组件，负责根据路由变化动态显示对应的页面内容。

基本用法

基础渲染

<template>
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
    
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

命名视图

<template>
  <div class="app-layout">
    <header>
      <router-view name="header"></router-view>
    </header>
    
    <aside>
      <router-view name="sidebar"></router-view>
    </aside>
    
    <main>
      <router-view></router-view>
    </main>
    
    <footer>
      <router-view name="footer"></router-view>
    </footer>
  </div>
</template>

组件属性

name - 视图名称

类型: string默认: 'default'

<!-- 默认视图 -->
<router-view></router-view>

<!-- 命名视图 -->
<router-view name="sidebar"></router-view>
<router-view name="header"></router-view>

插槽用法

作用域插槽

<template>
  <router-view v-slot="{ Component, route }">
    <component :is="Component" :key="route.path" />
  </router-view>
</template>

过渡动画集成

<template>
  <router-view v-slot="{ Component, route }">
    <transition name="fade" mode="out-in">
      <component :is="Component" :key="route.path" />
    </transition>
  </router-view>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

实际应用场景

基础布局系统

<template>
  <div class="app">
    <!-- 顶部导航 -->
    <AppHeader />
    
    <!-- 主要内容区域 -->
    <main class="main-content">
      <router-view></router-view>
    </main>
    
    <!-- 底部信息 -->
    <AppFooter />
  </div>
</template>

管理后台布局

<template>
  <div class="admin-layout">
    <!-- 侧边栏 -->
    <aside class="sidebar">
      <AdminSidebar />
    </aside>
    
    <!-- 主要内容区域 -->
    <main class="content">
      <router-view></router-view>
    </main>
    
    <!-- 右侧面板 -->
    <aside class="right-panel">
      <QuickActions />
    </aside>
  </div>
</template>

移动端应用布局

<template>
  <div class="mobile-app">
    <!-- 顶部状态栏 -->
    <div class="status-bar"></div>
    
    <!-- 页面内容 -->
    <main class="page-content">
      <router-view v-slot="{ Component, route }">
        <transition :name="getTransition(route)" mode="out-in">
          <component :is="Component" :key="route.path" />
        </transition>
      </router-view>
    </main>
    
    <!-- 底部标签栏 -->
    <nav class="tab-bar">
      <TabBar />
    </nav>
  </div>
</template>

<script setup>
function getTransition(route) {
  // 根据路由决定过渡动画
  return route.meta.transition || 'slide'
}
</script>

高级用法

嵌套路由渲染

<template>
  <!-- 一级路由 -->
  <router-view v-slot="{ Component, route }">
    <component :is="Component" :key="route.path">
      <!-- 二级路由 -->
      <router-view v-slot="{ Component: NestedComponent }">
        <component :is="NestedComponent" />
      </router-view>
    </component>
  </router-view>
</template>

条件渲染与权限控制

<template>
  <router-view v-slot="{ Component, route }">
    <template v-if="hasAccess(route)">
      <component :is="Component" />
    </template>
    <template v-else>
      <AccessDenied />
    </template>
  </router-view>
</template>

<script setup>
function hasAccess(route) {
  return !route.meta.requiresAuth || userStore.isAuthenticated
}
</script>

路由缓存策略

<template>
  <router-view v-slot="{ Component, route }">
    <keep-alive :include="cachedRoutes">
      <component :is="Component" :key="route.path" />
    </keep-alive>
  </router-view>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const cachedRoutes = computed(() => {
  return route.meta.keepAlive ? [route.name] : []
})
</script>

最佳实践

1. 合理的 key 策略

<!-- 使用完整路径作为 key（推荐） -->
<router-view v-slot="{ Component, route }">
  <component :is="Component" :key="route.fullPath" />
</router-view>

<!-- 或使用路由名称（如果路由名称唯一） -->
<component :is="Component" :key="route.name" />

2. 性能优化

<template>
  <!-- 延迟加载非关键视图 -->
  <router-view v-slot="{ Component, route }">
    <Suspense>
      <template #default>
        <component :is="Component" />
      </template>
      <template #fallback>
        <LoadingSpinner />
      </template>
    </Suspense>
  </router-view>
</template>

3. 错误边界处理

<template>
  <router-view v-slot="{ Component, route }">
    <ErrorBoundary>
      <component :is="Component" />
    </ErrorBoundary>
  </router-view>
</template>

注意事项

1. 嵌套路由 - 确保在父组件中正确放置 RouterView
2. 过渡动画 - 注意过渡模式的选择（out-in/in-out）
3. 组件缓存 - 合理使用 keep-alive 避免不必要的重渲染
4. 性能考虑 - 大型应用考虑路由懒加载

🎯 总结：RouterView 是 Vue Router 视图渲染的核心组件，通过灵活运用其各种特性可以构建出结构清晰、性能优秀的单页应用界面。