几个月nuxt.js项目使用后，实用知识点总结【干货】

干了几个月的nuxt项目，差点没把自己给干翻。在公司没开干nuxt项目之前，我也没接触过nuxt,潦潦草草看了几眼官网就开干了，在这过程中也踩了不少坑，也写了不少无谓的代码，所以借助这次时间总结了一些实战用到的知识点

希望能帮到大家，能让你少踩点坑，文采不好，凑合着看。

middleware定义

• nuxt.config
• layout
• pages

middleware顾名思义就是中间件的意思，在中间价可以做路由拦截，参数过滤等等

middleware

nuxt.config 配置文件定义

export default{
 router:{
     middleware: ['xxxx'] 
     //直接写中间件文件名，比如middleware/auth.js，直接写auth就ojbk
  }
}

特别提醒⏰ ：定义在nuxt.config中的中间件要在根目录的middleware文件下，定义对应的js文件，导出一个函数。

layout页面定义

export default {
  middleware:({route,params,query})=>{
    console.log(route,params,query, 'layout')
  }
}
### pages页面定义
```js
export default {
  middleware:({route,params,query})=>{
    console.log(route,params,query, 'page')
  }
}

middleware的第一参数是一个上下文参数，能够解构出route,params,query等等...参数，足够我们做各种骚操作。既然它们能够定义在不同位置，那么它们的执行顺序就有前有后?。

执行顺序：

nuxt.config => layout => page

validate 参数验证 (pages)

validate钩子主要是做页面级别（pages）的参数验证操作,在它的上下文能够解构出params,query...参数，最后return true代表验证通过，return false表示验证失败。

export default {
  validate({params,query}){
    console.log(params,query,'validate')
    return true
  }
}

asyncData 服务端请求异步数据 (pages)

asyncData 主要做服务端数据请求渲染,在它上下文能够解构出axios,route,params...参数，

要解构出axios,route,params...参数，要解构出axios，还需要做一些额外配置，往下拉有讲到。

解构出$axios，就可以做ajax请求，最后把要渲染的数据return出去就行。

export default {
  async asyncData({$axios,route}){
    let data = await $axios('xxx/xxx/xx')
    return {
     data
    }
  }
}

扩展路由（nuxt.config）

在nuxt默认为约定是路由，就是在pages在创建一个文件，或者一个文件夹就会自动创建对应的路由，无需手动配置什么，方便极了

这里就不多说，这里只要说一下，当我们要对某个地址做一个特殊操作的时候，或者全面接管约定式路由的时候，就需要用扩展路由了。

假如想让一个叫/hahaha/:id的路由也跳到详情，也这样做?

export default {
  router:{
    extendRoutes:(routes,resolve)=>{
      routes.push({
        name:"hahaha",
        path:'/hahaha/:id',
        component:resolve(__dirname,'pages/detail/_id.vue')
      })
    }
  }
}

假如要全面接管约定式路由，可以这样做?

export default {
  router:{
    extendRoutes(routes, resolve){
     return [
       {
         name:"home",
         path:"/",
         component:resolve(__dirname,'pages/index'),
         meta:{
           title:"home"
         }
       }
       ...这里还可以继续写，一般如果要接管约定式路由的话，都会把它放到一个文件再引入
     ]
    }
  }
}

定制错误页面 （layout）

处理错误页面，默认情况下，nuxt提供了一个默认的错误页面，如果你嫌它错的哇，也可以自己定制一个风骚的错误页面，直接下layout目录下定义一个error.vue文件就可以定制自己喜欢的错误页面了，它会代替默认的错误页面，在error.vue的prop有个error属于是包含错误信息的

<template>
  <div>
   错误页面{{ error }}
  div>
template>