页面目录

nuxt 的路由是自动帮我们创建的，不过我们要按照 nuxt 的约定来生成路由。

创建一个 pages 目录，然后在其下面创建文件或目录，即可生成路由。

动态页面

当我们不想一遍又一遍地创建相同页面时，nuxt 给我们提供了动态页面这么一个选择。我们只需要在.vue文件或者目录前面加上下划线_，即可创建动态页面。

大致效果为：访问 /abc 时，创建了一个 abc.vue 页面，访问其他则创建其他页面。

参考：nuxtjs.org/docs/direct…

属性

asyncData

每次加载组件之前都会调用 asyncData。它可以是异步的并接收上下文作为参数。返回的对象将与您的数据对象合并。

asyncData 仅应用于 pages，且不能访问 this。

所以 components 就不能使用 asyncData 了。但依然有补救方案：

使用 fetch hook
使用 mounted ，不过这样就没有服务端渲染了
pages 传递 props 给 components，不过页面的 data 就可能不太可读，因为它正在加载其他组件的数据

fetch（大于2.12的版本才有）

fetch 不同于 asyncData，并不需要返回一个对象用于合并进 data。

二者都会在服务端发起请求，然后等待请求完毕才进入路由（就没有前端的加载中状态了，是个缺点）。

Context

function (context) { // Could be asyncData, nuxtServerInit, ...
  // Always available
  const {
    app,
    store,
    route,
    params,
    query,
    env,
    isDev,
    isHMR,
    redirect,
    error,
    $config
  } = context

  // Only available on the Server-side
  if (process.server) {
    const { req, res, beforeNuxtRender } = context
  }

  // Only available on the Client-side
  if (process.client) {
    const { from, nuxtState } = context
  }

	// 接收参数
	context.params.id
	// 接收 query
	context.query.id
}

Server side rendering

客户端发起初始请求，就会命中 nodejs 内部服务，nuxt 生成 HTML 然后发送给客户端。像这些 hook 所做的（asyncData, nuxtServerInit or fetch）。
注水
使用在页面之间跳转则不会再去命中服务，请求会在客户端进行。

原理参考：nuxtjs.org/docs/concep…

多页面静态站点的生成

配置 nuxt.config.js：

generate: {
	//- 为动态路由添加静态化
  //- 静态化站点的时候动态路由是无法被感知到的
  //- 所以可以预测性的在这里配置
  routes: [
    '/user/1',
    '/user/2',
  ]
},

个人Nuxt笔记，需要的也可以来参考一下