Макеты Nuxt не добавляются в маршруты - PullRequest
0 голосов
/ 23 октября 2019

У нас есть настройка Nuxt с автоматически сгенерированным router.js. То, чего я пытаюсь добиться, - это другой макет для определенных страниц, с другой структурой HTML. Я ожидаю, что макет будет добавлен в nuxt.config.js как метатег (meta: { layout: 'newLayout' }).

Что я сделал:

  1. создал новый файл макета в / layouts /, newLayout.vue:
<template>
  <div class="testclass">
    <Top />
    <Header />
    <nuxt />
    <Footer />
  </div>
</template>

<script>
import Top from '~/components/Top.vue';
import Header from '~/components/Header.vue';
import Footer from '~/components/Footer.vue';
import init from '~/mixins/init';

export default {
  components: {
    Top,
    Header,
    Footer,
  },
  mixins: [init],
  mounted() {
    console.log('blep');
  },
};
</script>
Указано Я хотел использовать новый макет на нужных мне страницах. Я пробовал как
   meta: {
       layout: 'newLayout',
   },

, так и просто

    layout: 'newLayout',
Я проверяю, появляется ли что-нибудь в router.js, но пока это не так. Правильный макет также не загружен (естественно).

Мое дерево файлов выглядит следующим образом:

nuxt/
--| components/
--| layouts/
----| default.vue
----| newLayout.vue
--| pages/
----| newLayout/
------| _.vue
------| index.vue
----| _.vue
----| index.vue
----| newLayout.vue

Какой шаг мне не хватает?

Примечание. Я могу написать свой чек в nuxt.config.js и сам добавить метатег, но это также дает неожиданные результаты ... вывод - meta: {"layout":"newLayout"},, что, похоже, неверно, так как «макет» должен быть без кавычек? В любом случае это не работает ... и если я правильно читаю документы и примеры, мне не нужно будет в любом случае редактировать информацию макетов вручную.

1 Ответ

0 голосов
/ 30 октября 2019

Хорошо, поэтому, если кто-то столкнется с этой проблемой в будущем, проблема в этом случае возникла из-за использования вложенной маршрутизации в сочетании с макетами.

В дереве в моем сообщении вы можете видеть, что яесть папка / pages / newLayout / , а также /pages/newLayout.vue файл , который добавляет для меня вложение в маршруты (документация) ,Совершенно очевидным решением, конечно, является указание макета в этом файле , так как конвейер начинается там, и вуаля, он работает.

<template>
  <div>
    <nuxt-child />
  </div>
</template>
<script>
export default {
  layout: 'newLayout',
};
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...