2 nuxt中间间简单介绍

1. 简单例子

在middleware/目录下
写一个test.js，

export default function(context){
  context.query.message+=':test';
}

再写一个test2.js

export default function(context){
  context.query.message+=':test2';
}

在pages下创建文件test.vue

<template>
  <h1>{{ message }}</h1>
</template>
<script>
import axios from 'axios';
export default {
  middleware: ['test', 'test1'],
  async asyncData(context){
    let {data}=await axios.get(`http://127.0.0.1:8002?message=${context.query.message}`);
    return {message: data.message};
  },
}
</script>

访问http://127.0.0.1:3000/test?message=a，会显示a:test:test2。换句话说，middleware会先执行，然后再执行pages里的代码。