vue-Nuxt.js服务端渲染发起请求

2023-07-05  本文已影响0人  云高风轻

1. 前言

1.之前写了篇react-next.js服务端渲染

  1. 这次写个 vue端的 Nuxt.js服务端如何发起请求
  2. Nuxt.js

2. 使用内置的$axios模块

  1. Nuxt.js内置了$axios模块,它是基于axios库的封装,可以在页面组件或插件中直接使用
  2. 代码
<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请求,获取数据,并将数据作为组件的属性返回

  1. 这样在页面组件中就可以使用data来展示数据了

3. 扩展

1.使用第三方库:除了内置的$axios模块,你还可以使用其他第三方库,例如axios、isomorphic-fetch等。

  1. 使用这些方法与普通的Vue应用中相同。你可以在页面组件或插件中导入并使用这些库来发起请求。


参考资料

nuxtjs


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
上一篇下一篇

猜你喜欢

热点阅读