Nuxt.js-如何在布局内部使用组件？

Question

所以我开始玩Nuxt.js。我想修改默认布局文件以具有页眉和页脚。为此，我想创建一个Header和Footer组件，并将页面内容标签（<nuxt/>）放在它们之间。但是什么也没发生。

这是我的default.vue布局文件：

<template>
  <div>
    <header/>
    <nuxt/>
    <h1>Footer</h1>
  </div>
</template>

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

export default {
  components: {
    Header
  }
};
</script>

<style>
...
</style>

这是我的Header.vue组件文件：

<template>
<div>
<h1>Header</h1>
   <div class="links">
          <nuxt-link to="/" class="button--grey">Home</nuxt-link>
          <nuxt-link to="/about" class="button--grey">About</nuxt-link>
      </div>
</div>
</template>

<style>
.links {
  padding-top: 15px;
}
</style>

这有什么问题吗？我可以首先使用布局文件中的组件吗？我是否必须在其他地方分别注册新创建的组件？

可悲的是，关于此的信息并不多。我该如何实现？

提前致谢！

Answer 1

尝试更改<header />为 <Header />。（因为您为视图定义的组件是带有大写字母H的Header。）

大写很重要。在这种情况下，由于header是现有的element标签，所以Vue只会渲染一个空标签而不会抱怨。

Answer 2

您不能将保留的HTML标记用于组件名称。它包括页脚，页眉等。这里是保留标签名称的完整列表。

因此，您需要将组件重命名为其他名称，例如my-header