Vue中如何让SiteHead组件仅在HomeView页面顶部显示？

方案一：通过路由元信息控制显示 #

这种方法适合通过路由规则来控制组件显示，步骤如下：

1. 给首页路由添加元标记
   打开路由配置文件（一般是router/index.js），给HomeView的路由项加上meta字段，标记需要显示SiteHead：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    meta: { showSiteHead: true } // 标记首页需要显示头部
  },
  // 其他页面路由不需要加这个字段
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

2. 修改App.vue判断显示
   在App.vue里通过当前路由的元信息，决定是否渲染SiteHead：

<template>
  <div class="flex flex-col min-h-screen font-Roboto bg-back-light dark:bg-back-dark">
    <!-- 只有首页才显示SiteHead -->
    <SiteHead v-if="route.meta.showSiteHead" />
    <SiteNavigation />
    <RouterView />
    <SiteFooter />
  </div>
</template>

<script setup>
import { RouterView, useRoute } from "vue-router";
import SiteNavigation from "./components/SiteNavigation.vue";
import SiteFooter from "./components/SiteFooter.vue";
import SiteHead from "./components/SiteHead.vue";

const route = useRoute(); // 获取当前路由实例
</script>

<style lang="scss" scoped>
</style>

方案二：用插槽灵活插入组件 #

如果不想改动路由配置，用Vue的插槽功能可以更灵活地控制组件位置：

1. 给App.vue添加顶部插槽
   修改App.vue，新增一个名为top的插槽，用来放置首页的SiteHead：

<template>
  <div class="flex flex-col min-h-screen font-Roboto bg-back-light dark:bg-back-dark">
    <!-- 顶部插槽，默认不显示内容 -->
    <slot name="top"></slot>
    <SiteNavigation />
    <RouterView />
    <SiteFooter />
  </div>
</template>

<script setup>
import { RouterView } from "vue-router";
import SiteNavigation from "./components/SiteNavigation.vue";
import SiteFooter from "./components/SiteFooter.vue";
// 这里不再全局引入SiteHead
</script>

<style lang="scss" scoped>
</style>

2. 在HomeView中插入SiteHead
   修改HomeView.vue，通过插槽把SiteHead放到App.vue的顶部位置：

<script setup>
import SiteHead from "../components/SiteHead.vue";
</script>

<template>
  <!-- 把SiteHead插入到App.vue的top插槽里 -->
  <template v-slot:top>
    <SiteHead />
  </template>
  <main>
    <p class="text-white p-10">Home</p>
  </main>
</template>

两种方案都能实现需求：只有首页的SiteNavigation上方显示SiteHead，其他页面不会出现这个组件。

内容的提问来源于stack exchange，提问作者daniel