一、自定义视图
在没有指定视图的情况下，nuxt 使用的是默认视图 layouts/default.vue
<template>
<nuxt />
</template>
1、创建一个视图并将其保存到 layouts/blog.vue
别忘了在布局文件中添加 < nuxt /> 组件用于显示页面的主体内容。
<template>
<div>
<div>我的博客导航栏在这里</div>
<nuxt />
</div>
</template>
2、使用自定义视图
在 pages/posts.vue 中通过 layout 属性指定视图来替代默认视图
<template>
...
</template>
<script>
export default {
layout: 'blog'
}
</script>
二、自定义错误页面
自定义 layouts/error.vue 组件，这个布局文件不需要包含
标签。可以把这个布局文件当成是显示应用错误（404，500 等）的组件。
error.vue 的名称固定不可变
<template>
<div class="container">
<h1 v-if="error.statusCode === 404">页面不存在</h1>
<h1 v-else>应用发生错误异常</h1>
<nuxt-link to="/">首 页</nuxt-link>
</div>
</template>
<script>
export default {
props: ['error'],
layout: 'blog' // 可以为错误页面指定自定义的布局
}
</script>
三、页面组件的特殊配置
<script>
export default {
// 页面级别的配置项
// 1. 指定当前页面使用的布局（layouts 根目录下的布局文件）
layout: 'custom-layout', // 字符串形式
// 或者动态设置,使用 layout 函数形式，要确保返回一个字符串
layout (context) {
return 'custom-layout'
},
// 2. 指定页面的中间件，中间件会在页面渲染之前被调用
middleware: 'auth', // 单个中间件
// 或者多个中间件
middleware: ['auth', 'stats'],
// 3. 指定页面切换的过渡动效
transition: 'page', // 字符串形式
// 或者对象形式
transition: {
name: 'page',
mode: 'out-in'
},
// 4. 布尔值，默认: false。
//用于判定渲染页面前是否需要将当前页面滚动至顶部
scrollToTop: true,
// 5. this.$nuxt.$loading.start(),可以手动控制它,
//仅适用于在 nuxt.config.js 中设置loading的情况下
loading: false,
// 6. key属性
key: (to) => to.fullPath,
// 7. 校验方法用于校验 动态路由的参数,必须返回布尔值或重定向对象
validate({ params }) {
// 验证 ID 是否为数字
return /^\d+$/.test(params.id)
},
// 8. asyncData 中不能使用 this，因为它在组件实例创建之前执行
//支持 异步数据处理，另外该方法的第一个参数为当前页面组件的上下文对象
//返回一个 Promise,
//nuxt.js会等待该Promise被解析之后才会设置组件的数据，从而渲染组件.
async asyncData({ params, $axios }) {
const data = await $axios.$get(`/api/posts/${params.id}`)
return { post: data }
},
// 9. watchQuery 配置,监听 URL 查询参数的变化并触发页面更新
watchQuery: ['page'],
async asyncData({ query, $axios }) {
// 当 URL 查询参数 page 变化时重新获取数据
const page = parseInt(query.page) || 1
const posts = await $axios.$get(`/api/posts?page=${page}`)
return { posts }
}
// 10. 页面头部信息
head() {
return {
title: this.title,
meta: [
{ hid: 'description', name: 'description', content: '页面描述' }
]
}
}
}
</script>
asyncData 的参数说明：
<script>
export default {
async asyncData({
// 最常用的核心属性
app, // Vue 实例
store, // Vuex store
route, // 路由信息
params, // 路由参数 如 _id.vue 中的 id
query, // URL 查询参数
error, // 错误处理方法
redirect, // 重定向方法
$axios, // axios 实例（如果使用了 @nuxtjs/axios）
// 其他常用属性
env, // 环境变量
isDev, // 是否是开发环境
isHMR, // 是否是热模块替换
req, // Node.js HTTP 请求对象 (仅服务器端)
res, // Node.js HTTP 响应对象 (仅服务器端)
// 不太常用的属性
from, // 来源路由
beforeNuxtRender, // 渲染页面前的函数
nuxtState, // Nuxt 状态
base, // 路由基础路径
payload, // 页面负载数据
}) {
// 使用示例
}
}
</script>
