Nuxt布局没有添加到路由中

Question

我们有一个自动生成的router.js的Nuxt设置。我试图实现的是针对特定页面的不同布局，具有不同的html结构。我期望的是，布局将添加到nuxt.config.js中，作为一个元标记(meta: { layout: 'newLayout' })。

我所做的：

1. 在/ layout /，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>

1. 指定要在需要的页面中使用新布局。我都试过了

   meta: {
       layout: 'newLayout',
   },

然后就

    layout: 'newLayout',

1. 我正在检查是否有任何东西出现在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"},，这似乎不正确，因为“布局”应该没有引号？这两种方法都行不通..。而且，如果我正确地阅读了文档和示例，就不需要手动编辑布局信息了。

Answer 1

好吧，如果将来有人遇到这个问题，这个问题来自嵌套路由和布局的结合。

在我的帖子中的树中，您可以看到我有一个/pages/newLayout/文件夹，也有/pages/newLayout.vue文件，它将嵌套添加到(文件)的路由中。当然，超级明显的解决方案是在中指定文件的布局，因为管道从那里开始，瞧，它可以工作。

<template>
  <div>
    <nuxt-child />
  </div>
</template>
<script>
export default {
  layout: 'newLayout',
};
</script>