Nuxt.js 教程（三）
2021-04-22 本文已影响0人
其其小宝
第三章 布局与错误
默认页面布局
- 服务运行之后在会生成一个默认的 html 模板页面 .nuxt/views/app.template.html 内容如下：
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
{{ APP }} 渲染的是主体内容
- 页面中的表达式引用的是 nuxt.config.js 文件中 head 属性值：
head: {
title: 'nuxt-app',
htmlAttrs: { // 对应 {{ HTML_ATTRS }} ，html标签属性
lang: 'en',
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
自定义页面布局
我们也可以定制化模板页面，只需要在应用根目录下创建一个 app.html 的文件，就可以覆盖 Nuxt.js 默认模板。
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
<h2>这是导航栏</h2>
{{ APP }}
</body>
</html>
重启服务，重新访问右上角多有文字出来。
组件布局
默认组件布局
Nuxt.js 可通过添加 layouts/default.vue 文件来扩展应用的默认布局。
nuxt 官方提供的默认布局源码如下：
<template>
<div>
<Nuxt />
</div>
</template>
<Nuxt /> 组件用于显示页面的主体内容。
自定义布局组件
在 layout 目录中的创建 .vue 文件来自定义布局， 然后通过页面组件（pages目录下的文件）中的 layout
属性来引用自定义布局。
示例：
- 下面我们创建 layouts/blog.vue 文件，在其中定义一个博客上下结构的布局文，如下：
<template>
<div>
<!-- 头部导航 -->
<div>
<h1>博客导航栏</h1>
</div>
<!-- 主体内容 -->
<nuxt />
</div>
</template>
- 在 pages 目录下面的页面组件通过 layout 属性引用自定义组件布局，
layout 默认值是 default
<template>
<div>
<h3>这是主体内容-文章列表</h3>
</div>
</template>
<script>
export default {
// 引用的是 /layouts/blog.vue 布局
// layout: 'blog',
// 或者
layout(context) {
console.log('context', context)
return 'blog'
},
}
</script>
-
重启服务，访问、airtcle
image.png
- 注意：如果是 layouts/blog 目录下放了 index.vue ，直接通过 layout: 'blog' 是找不到这个页面的，需
要指定文件名 index 才找得到，即 layout: 'blog/index'
定制错误页面
- 通过编辑 layouts/error.vue 文件来定制化错误页面（404，500等）。
警告: 虽然此文件放在 layouts 文件夹中, 但应该将它看作是一个页面(page) ，而不是布局使用。
<template>
<div>
<h1 v-if="error.statusCode === 404">
您访问的页面不存在：{{ error.message }}
</h1>
<h1 v-else>请求接口失败或超时！请刷新重试</h1>
</div>
</template>
<script>
export default {
props: ['error'], // 直接引用Error错误对象
// 可只为 blog 布局定制的错误页面, 默认 default 所有布局的错误页
// layout: 'blog'
}
</script>
- 发送一个错误的请求：http://localhost:8000/test 响应401
image.png
设置当前页面头部标签
使用 head 方法设置当前页面的头部标签。
在 head 方法里可通过 this 关键字来获取组件的数据，你可以利用页面组件的数据来设置个性化的 meta 标
签。
- 修改首页组件 page/index.vue
<script>
export default {
data() {
return {
title: '博客首页',
}
},
// 使用 head 方法设置当前页面的头部标签。
// 在 head 方法里可通过 this 关键字来获取组件的数据，你可以利用页面组件的数据来设置个性化的 meta 标签
head() {
return {
bodyAttrs: {
style: 'background:red',
},
title: this.title,
meta: [
{ hid: 'description', name: 'description', content: 'nuxt.js技术栈' },
],
}
},
}
</script>
