nuxt 请求数据 切换

在api下创建一个新的文件如test.js，里面放所有的请求

const baseURL = 'https://xxx.com/'
import axios from 'axios'
import qs from 'qs';
export function tabdatas(ty=1) {
    return axios({
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      method: "post",
      url: baseURL +  "xx",
      data: qs.stringify({ty})
    });
}

用到qs来处理发送请求的参数   npm i qs

*在使用Post时候要使用qs.stringify(),请求头里需设置

"Content-Type": "application/x-www-form-urlencoded"

之后就可以在pages里的文件写切换代码了

<template>
  <div class="container">
    <ul>
      <li @click="cur=1">内容1</li>
      <li @click="cur=2">内容2</li>
      <li @click="cur=3">内容3</li>
    </ul>
    <ul>
      <li v-for="(item,i) in news_data" :key="i">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
  import {tabdatas} from "~/api/tests.js"
  export default {
    async asyncData({params}) {
      let [res2] = await Promise.all([
        tabdatas(),
      ])
      return {
        news_data: res2.data.data,
       
      };
    },
    watch: {
      cur(val) {
        this.tabdatas(val).then((res) => {
          this.news_data = res.data.data
        })
      },
    },
    data(){
      return{
        cur: 1,
        tabdatas,
      }
    }
  }
</script>

<style>
</style>

完成！

请多多指教呀~(≧▽≦)/~