这是我参与「第五届青训营 」伴学笔记创作活动的第7天 青训营大项目笔记

Nuxt页面组成

Nuxt中每个页面都由三层级的文件组成

1. 布局文件（根组件）：保存在layouts目录中，所有的页面都是布局文件中的子组件。
2. 页面组件（页面）：保存在pages目录中，一个文件就是一个路由页面
3. 组件文件（组件）：保存在components中，在每个页面中使用的组件

1、页面文件

• 页面文件中还可以有多个组件文件
• 如果修改使用布局文件可以在页面中使用**layout：‘xxxx’**来指定要使用的布局文件

2、布局文件

• 默认是default.vue,它是所有页面的根组件
• 自定义布局文件，在layouts 目录下，创建一个xxx.vue文件
• 使用看作vue-router占位，把路由匹配的页面组件放到该位置
• 布局文件作用：网站通用布局结构

演示：

创建layouts文件夹 ，在layouts目录下创建blog.vue（注default.vue为默认布局文件）

<template>
    <div>
        <h1>Blog layout Page</h1>
        <Nuxt/><!--表示将页面文件插入该位置，占位-->
    </div>
</template>

在pages目录下创建index.vue

<template>
    <div class="home">
        <h3>Home Page</h3>
        <Goods />
    </div>
</template>
<script>
export default {
   //指定使用的布局文件，不指定即使用default.vue
   layout:'blog'
}
</script>

在components目录下创建Goods.vue

<template>
    <div class="goods">
        <ul>
            <li>电子产品</li>
            <li>服装</li>
        </ul>
    </div>
</template>

总结：布局文件包含页面组件，页面组件可以直接使用components目录下的复用组件，可以在页面组件中使用layout:xxx.vue 指定布局文件

运行报错：

1、组件模板应只包含一个根元素。如果在多个元素上使用 v-if，请改用 v-else-if 来链接它们。

解决方法：添加了一个根div，来包含其他元素

2、若页面不更新布局文件，两种方法：项目重新启动、文件名错误

3、error组件

1. 定义在layouts目录下，创建为error.vue文件。作用：显示一个错误页面，提升用户体验，当用户跳转到一个错误路由时跳转至该页面
2. 要把error组件看作页面文件，继承自default.vue布局，当然也可以通过layout属性指定自定义布局文件

实现：

在layouts目录下，创建为error.vue文件,这里未指定布局文件，则为默认布局

<template>
    <div>
    <h1>404</h1>
    </div>
</template>
​
<script>
​
</script>
​
<style >
​
</style>