<template> <div> <h2>About</h2> <nuxt-child></nuxt-child> </div> </template> <script> export default { layout:"about" } </script>
访问一下所有与 about 页面有关的页面，都会看到 Aaron个人博客主页 这个字样，若访问根路由则无法看到的。
如果做过 mvc 开发的话，如果页面发生错误会跳转到一个错误页面的。 Nuxt 也是有默认的错误页面的，但是全是英文而且样式也不太好看，不能自定义样式。如何自定义错误页面呢?
在 layouts 文件夹中新建一个 error.vue 文件。
layouts - error.vue
<template> <div> <h1>这里是错误页面</h1> <h2 v-if="error.statusCode == 404">404 - 页面不存在</h2> <h2 v-else>500 - 服务器错误</h2> <ul> <li><nuxt-link to="https://www.jb51.net/">HOME</nuxt-link></li> </ul> </div> </template> <script> export default { props:["error"] } </script>
在 error.vue 中可以通过 props 拿到一个 error 对象，获取到 error 错误信息之后能做任何想要做的事情。需要注意的一点是，自定意的错误页面，只能在客户端访问失效的时候才会响应到该页面，若在服务端的话，是无法直接渲染这个页面的。
更改页面配置 Nuxt 中有些全局的配置，配置信息在 nuxt.config.js 更改其全局配置， pages 文件夹中的 *.vue 文件也是可以配置的，页面私有的配置会覆盖掉全局的配置。
举例：
export default { layout:"about", head: { title:"About" } }
在这些全局配置中最重要的一个就是 asyncData 这个属性。 asyncData 到底是用来做什么的呢？这个数据可以在设置组件的数据之前能一步获取或者处理数据。也就是说在组件渲染之前先获取到数据，然后等待挂载渲染。
举个例子：
<template> <div> <h2>姓名：{{userInfo.name}}</h2> <h2>年龄：{{userInfo.age}}</h2> <nuxt-child></nuxt-child> </div> </template> <script> let getUserInfo = () => { return new Promise(resolve => { setTimeout(() => { let data = {"name":"Aaron","age":18}; resolve(data); }) }) } export default { layout:"about", head: { title:"About" }, async asyncData(){ const userInfo = await getUserInfo(); return {userInfo} } } </script>
一定要 return 出去获取到的对象，这样就可以在组件中使用，这里返回的数据会和组件中的 data 合并。这个函数不光在服务端会执行，在客户端同样也会执行。
注意事项：
1.asyncData 方法会在组件(限于页面组件)每次加载之前被调用
2.asyncData 可以在服务端或路由更新之前被调用
3.第一个参数被设定为当前页面的上下文对象
4.Nuxt会将 asyncData 返回的数据融合到组件的data方法返回的数据一并返回给组件使用
5.对于 asyncData 方式实在组件初始化前被调用的，所以在方法内饰没办法通过this来引用组件的实例对象
刚刚提到了一点就是上下问对象，在上线文对象中可以获取到很多东西，如路由参数，错误信息等等等，这里就不作太多赘述了，有了这些可以做一些页面的重定向或者其他工作，比如参数校验，安全验证等工作。
路由扯了一大堆，接下来说一下如何在 Nuxt 中融入 axios 的使用。
安装 axios
npm install @nuxtjs/axios --save-dev
安装完成后更改配置信息：
nuxt.config.js
module.exports = { modules: [ // Doc: https://axios.nuxtjs.org/usage '@nuxtjs/axios', ], axios: { proxy:true // 代理 }, proxy: { "/api/":"http://localhost:3001/" // key(路由前缀)：value(代理地址) } }
主要说名一下 proxy 这里， /api/ 在请求的时候遇到此前缀则会只指向的代理地址去请求数据。
既然说到了 axios ，就不得不提到的一个东西就是拦截器，很是有用在项目开发过程中必不可少的。
举个例子：
module.expores{ plugins: [ '@/pluginx/axios' ] } plugins/axios.js export default ({$axios,request}) => { $axios. onRequest((config) => { config.headers.token = "Aaron" }) }
总结
说了这么多也许会有些纰漏，或者遗漏的知识点，若有什么错误的地方可以留言，尽快做出改正。谢谢大家花费这么长时间阅读这篇文章。