NuxtJS | загрузить компонент в компонент заголовка - PullRequest
Новая
       14

NuxtJS | загрузить компонент в компонент заголовка

0 голосов
/ 29 октября 2018

Я сейчас занят созданием приложения NuxtJS. В этом приложении у меня есть заголовок с компонентом заголовка, который работает как задумано. Но я хочу добавить функцию для моих подстраниц. Заголовок всегда имеет один и тот же стиль, но содержание должно быть другим. Как я смогу загрузить правильный компонент контента в свой компонент заголовка на основе страницы? Например, вот так моя структура nuxtjs выглядит следующим образом:

страниц / 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

Я уже несколько часов занимаюсь этой проблемой и не могу найти для нее полезного решения. Есть здесь кто-нибудь, кто сможет мне помочь?

Спасибо.

Ответы [ 2 ]

0 голосов
/ 29 октября 2018

Вы ищете слоты. Документы можно найти здесь

Пример 

<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>
0 голосов
/ 29 октября 2018

Загружен ли ваш домашний контент?
Если нет, ваш '~/components/header/HomepageContent/vue' должен быть '~/components/header/HomepageContent.vue'

...