vue-Nuxt.js服务端渲染发起请求
2023-07-05 本文已影响0人
云高风轻
1. 前言
1.之前写了篇react-next.js服务端渲染
- 这次写个 vue端的
Nuxt.js
服务端如何发起请求- Nuxt.js
2. 使用内置的$axios模块
Nuxt.js
内置了$axios
模块,它是基于axios库的封装,可以在页面组件或插件中直接使用
- 代码
<template>
<div>
<!-- 页面内容 -->
</div>
</template>
<script>
export default {
async asyncData({ $axios }) {
const response = await $axios.get('https://api.example.com/data');
const data = response.data;
return {
data
};
}
};
</script>
1.
asyncData
方法在服务器端发起HTTP
请求,获取数据,并将数据
作为组件的属性返回
。
- 这样在页面组件中就可以使用data来展示数据了
3. 扩展
1.使用第三方库:除了内置的
$axios
模块,你还可以使用其他第三方库
,例如axios、isomorphic-fetch等。
- 使用这些
库
的方法
与普通的Vue应用中相同
。你可以在页面组件或插件中导入并使用这些库来发起请求。