所以我开始使用 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>
这有什么问题吗?我可以首先在布局文件中使用组件吗?我是否必须在其他地方单独注册新创建的组件?
遗憾的是,没有太多关于此的信息。我怎样才能实现它?
提前致谢!
最佳答案
尝试更改 <header />
至 <Header />
. (因为您为 View 定义的组件是带有大写 H 的 Header。)
Capitalization is important. In this case, because
header
is an existing element tag, Vue will just render an empty tag without complaining.
关于javascript - Nuxt.js - 如何在布局中使用组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51747207/