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

您不能为组件名称使用保留的 HTML 标签。它包括页脚、页眉等。Here 保留标签名称的完整列表。

因此您需要将您的组件重命名为不同的名称，例如 my-header

Answer 2

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

Capitalization is important. In this case, because header is an existing element tag, Vue will just render an empty tag without complaining.

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

Nuxt.js - How to use component inside layout?

javascript

vue.js

vuejs2