在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>
完成!
请多多指教呀~(≧▽≦)/~