NuxtJS|在头组件中加载组件

Posted 2023-02-23

【中文标题】NuxtJS|在头组件中加载组件

【英文标题】：NuxtJS| load component in header component

【发布时间】：2019-04-02 05:42:54

【问题描述】：

我目前正忙于创建 NuxtJS 应用程序。在这个应用程序中，我有一个带有标题组件的标题，它按预期工作。但我想为我的子页面添加一个功能。标题始终具有相同的样式，但内容应该不同。我如何能够根据页面在我的标题组件中加载正确的内容组件？比如像这样我的nuxtjs结构如下：

pages/index.vue:

<template>
    <div>
        <Header/>
    </div>
</template>

<script>
    import Header from '~/components/Header.vue';

    export default 
        components: 
            Header
        
    
</script>

` 这应该加载我的 header.vue 与主页的内容，例如我的 /components/header.vue 应该看起来像这样：

<template>
    <div>
        <header class="hero is-fullheight">
            <div class="hero-head has-background-white">
                <Menu />
            </div>
            <div class="hero-body">
                <div class="container fluid">
                    <HomepageContent />
                </div>
            </div>
        </header>
    </div>
</template>

<script>
    import Menu from '~/components/header/Menu.vue';
    import HomepageContent from '~/components/header/HomepageContent.vue';

    export default 
        components: 
            Menu,
            HomepageContent
        
    
</script>

<style lang="scss" scoped>
    .hero 
        background-size:cover;
        position:relative;
    
</style>

如您所见，它应该加载组件 homepageContent。但是当我从子页面加载 header.vue 时，例如“about-me”，它应该加载组件 AboutMeContent.vue

我已经解决这个问题几个小时了，但我找不到有用的解决方案。这里有谁能帮帮我吗？

谢谢。

【参考方案1】：

您正在寻找插槽。文档可以找到here

例子

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

<base-layout>
  <template slot="header">
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template slot="footer">
    <p>Here's some contact info</p>
  </template>
</base-layout>

【参考方案2】：

您的主页内容是否已加载？ 如果不是，您的'~/components/header/HomepageContent/vue' 应该是'~/components/header/HomepageContent.vue'

【讨论】：

抱歉，打错了。该组件应该根据调用 header.vue 组件的页面加载。因此，我不必为每个不同的标题创建多个 header.vue 组件。

如果你只有几个页面，你可以将所有页面导入到 Header.vue 中。然后根据页面名称显示，如<HomepageContent v-if="$route.path == 'home"></HomepageContent>