Question

我目前正忙于创建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

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

谢谢。

Answer 1

您的HomepageContent是否已加载？
如果不是，那么您的'~/components/header/HomepageContent/vue'应该是'~/components/header/HomepageContent.vue'

Answer 2

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

示例

#include <stdio.h>

int main(void)
{
    int max = 100;
    int n0 = 0;
    int n1 = 0;

    for (int i = 1; i <= max; i++) {
        for (int x = i; x != 0; x /= 10) {
            switch (x % 10) {
                case 0: n0++; break;
                case 1: n1++; break;
                default: break;
            }
        }
    }
    printf("0 appears %d times\n", n0);
    printf("1 appears %d times\n", n1);
    return 0;
}

NuxtJS |在标头组件中加载组件

2 个答案: