页面目录
pages 目录包含应用程序的视图和路由。Nuxt 读取此目录中的所有 .vue 文件并自动创建路由器配置。
每个页面组件都是 Vue 组件，但 Nuxt 添加了特殊属性和功能，使通用应用程序的开发尽可能简单。
<template>
<h1 class="red">Hello {{ name }}!</h1>
</template>
<script>
export default {
// 页面属性在此处
}
</script>
<style>
.red {
color: red;
}
</style>
动态页面
当页面名称来自 API 或不想多次创建相同页面时，可以创建动态页面。要创建动态页面，在 .vue 文件名前添加下划线。如果想让目录动态化，在目录名前添加下划线。文件名和目录名可以自由命名，但必须在名称前加下划线。
例如，pages 文件夹中有 _slug.vue 文件时，可以通过 context 的 params.slug 访问值。
<template>
<h1>{{ this.slug }}</h1>
</template>
<script>
export default {
async asyncData({ params }) {
const slug = params.slug // 访问 "/abc" 路径时，slug 为 "abc"
return { slug }
}
}
</script>
在 /_book 文件夹中创建 /_slug.vue 文件时，可以通过 context 的 params.slug 和 params.book 访问值。
<template>
<h1>{{ this.book }} / {{ this.slug }}</h1>
</template>
<script>
export default {
async asyncData({ params }) {
const book = params.book
const slug = params.slug
return { book, slug }
}
}
</script>
属性
asyncData
asyncData 在每次加载组件之前调用，可以是异步的，接收 context 作为参数。asyncData 的结果会与 data 合并。
export default {
asyncData(context) {
return { name: 'World' }
}
}
fetch
fetch 可用于异步获取数据，在服务端渲染路由时调用，在客户端导航时调用。
<script>
export default {
data() {
return {
posts: []
}
},
async fetch() {
this.posts = await fetch('https://api.nuxtjs.dev/posts').then(res =>
res.json()
)
}
}
</script>
head
为当前页面设置特定的 <meta> 标签。Nuxt 使用 vue-meta 更新应用程序的文档头和 meta 属性。
export default {
head() {
// 为此页面设置 meta 标签
}
}
layout
指定 layouts 目录中定义的布局。
export default {
layout: 'blog'
}
loading
将 loading 设为 false 时，可以防止进入页面时自动调用 this.$nuxt.$loading.finish()，以及离开页面时自动调用 this.$nuxt.$loading.start()。
export default {
loading: false
}
transition
为此页面设置自定义过渡。
export default {
transition: 'fade'
}
scrollToTop
scrollToTop 可以告诉 Nuxt 在渲染页面前滚动到顶部。默认情况下，切换到其他页面时会滚动到顶部，但对于子路由会保持滚动位置。如果想在渲染子路由时也滚动到顶部，请将 scrollToTop 设为 true。
export default {
scrollToTop: true
}
反之，父路由也可以手动将 scrollToTop 设为 false。
如果想覆盖 Nuxt 关于滚动的默认行为，请参阅 scrollBehavior 选项 。
middleware
为此页面定义中间件，在渲染页面前调用。
export default {
middleware: 'auth'
}
watchQuery
设置 watchQuery 键，指定要监听的查询字符串。定义的字符串发生变化时，所有组件方法（asyncData、fetch、validate、layout 等）都会被调用。为提升性能，默认禁用监听。
export default {
watchQuery: ['page']
}
export default {
watchQuery: true
}
也可以使用 watchQuery(newQuery, oldQuery) 函数进行更精细的监听：
export default {
watchQuery(newQuery, oldQuery) {
// 仅当旧查询字符串包含 `bar` 且新查询字符串包含 `foo` 时才执行组件方法
return newQuery.foo && oldQuery.bar
}
}
key
与 Vue 组件中用作虚拟 DOM 提示的 key 属性类似，此属性允许从页面本身（而非父组件）定义键值。
Nuxt 默认此值为 $route.path，即导航到不同路由时会创建干净的页面组件，逻辑上等同于：
<router-view :key="$route.path" />
此属性可以是 String 或 Function，以路由为第一个参数。
忽略页面
如果想忽略页面，在文件名前加 -，它就不会包含在 router.js 文件中。
例如，pages/-about.vue 会被忽略。
配置
通过设置 dir.pages 选项可以将 pages/ 目录重命名为其他名称：
export default {
dir: {
// 将 `pages` 目录重命名为 `routes`
pages: 'routes'
}
}