gpt4 book ai didi

javascript - 使用vue,我希望一个组件位于页面的最顶部,但仅限于单个 View

转载 作者:行者123 更新时间:2023-12-05 09:25:46 26 4
gpt4 key购买 nike

使用下面的代码,组件 SiteHead 将出现在所有页面的最顶部,高于所有其他组件,但我只希望 HomeView.vue 页面出现这种情况。

我希望该组件位于 HomeView 页面的最顶部,位于 SiteNavigation 组件之上。将 SiteHead 组件放入 HomeView.vue 代码中会将其放置在 SiteNavigation 下方。

我该怎么做?

这是我的 App.vue 代码:

<template>
<div class="flex flex-col min-h-screen font-Roboto bg-back-light dark:bg-back-dark">
<SiteHead />
<SiteNavigation />
<RouterView />
<SiteFooter />
</div>
</template>

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

<style lang="scss" scoped>

</style>

这是我的 HomeView.vue 代码(尽管目前几乎是空的):

<script setup>
</script>

<template>
<main>
<p class="text-white p-10">Home</p>
</main>
</template>

最佳答案

您可以利用 Vue3 的 teleport 功能:

文档:https://vuejs.org/guide/built-ins/teleport.html#basic-usage

App.vue:

<template>
<div class="flex flex-col min-h-screen font-Roboto bg-back-light dark:bg-back-dark">
<div id="site-head"></div>
<SiteNavigation />
<RouterView />
<SiteFooter />
</div>
</template>

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

<style lang="scss" scoped>

</style>

HomeView.vue

<template>
<main>
<p class="text-white p-10">Home</p>
<Teleport to="#site-head">
<SiteHead />
</Teleport>
</main>
</template>

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

关于javascript - 使用vue,我希望一个组件位于页面的最顶部,但仅限于单个 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/75097179/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com