一、自定义视图
在没有指定视图的情况下，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>javascript">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>javascript">export default {props: ['error'],layout: 'blog' // 可以为错误页面指定自定义的布局}
</script>
三、页面组件的特殊配置
<script>javascript">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) || 1const posts = await $axios.$get(`/api/posts?page=${page}`)return { posts }}// 10. 页面头部信息head() {return {title: this.title,meta: [{ hid: 'description', name: 'description', content: '页面描述' }]}}}
</script>
asyncData 的参数说明：
javascript"><script>export default {async asyncData({// 最常用的核心属性app, // Vue 实例store, // Vuex storeroute, // 路由信息params, // 路由参数 如 _id.vue 中的 idquery, // 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>
