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

Question

所以我開始玩Nuxt.js. 我想修改默認布局文件以具有頁眉和頁腳。 為此，我想創建一個頁眉和頁腳組件，並在它們之間放置頁面內容標記（ <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是現有的元素標記 ，所以Vue只會呈現一個空標記而不會抱怨。

Answer 2

您不能將保留的HTML標記用於組件名稱。 它包括頁腳，標題等。 這里是保留標簽名稱的完整列表。

因此，您需要將組件重命名為不同的組件，例如my-header