nuxt 之asyncData浅析

最新推荐文章于 2023-05-11 18:29:56 发布
最新推荐文章于 2023-05-11 18:29:56 发布
阅读量6.4k 收藏 5
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/douxubao/article/details/104821229
版权

摘要：

*asyncData方法可以使得你能够在渲染组件之前异步获取数据。asyncData方法会在组件（限于页面组件）每次加载之前被调用

解析

：传统axio是页面静态html，css加载好了之后再去发送请求，获取数据来动态渲染，这样源代码*只有一开始加载的一点内容，不利于爬虫抓取
asyncData可以在页面渲染之前去获取请求数据，再渲染页面，这样子页面源代码就包含所有渲染的数据，利于seo

原理分析：

https://cloud.tencent.com/developer/news/221008（转载）

说明：

  • nuxt使用了node的服务器 node server ，

  • asyncData只是在首屏的时候调用一次（即页面渲染之前，所以事件触发不了它）

  • server.js会将新创建的Vue实例返回，会根据实例内容创建好一段已经拼装好的代码片段

  • 最后就是调用ssrTemplate将一些layout的模板拼装好返回整个页面的html

  • 页面的V-for是重复渲染，所以必须加:key，参考前一篇文章

都旭宝
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Nuxt页面自定义meta标签和asyncData异步请求
01-03
一、页面自定义meta标签 可以为每个页面单独设置不同的meta标签 以便于SEO 全局的meta标签在nuxt.config.js文件里配置 而单独的meta标签在组件的内部标签内进行配置即可 值得注意的是：hid属性是页面的唯一标识 若想要在此配置并覆盖全局的meta 那么hid属性必须为description 因为默认的meta的hid属性就是description 若hid不配置成description 则会有两个meta标签 其中 一个的hid是description(默认的) 另一个的hid是自己配置的 从而产生重复 导致一些问题 因此hid要配置成description 以覆盖默
[绍棠] nuxt asyncData 里面实现多请求
绍棠的博客
12-13 1423
1、多个异步请求 async asyncData(ctx) { let site = await ctx.app.$axios.get('/testApi' + '/query/site', { params: {} }); var siteid = site.data.data.id; let listCategory = await ctx.app.$axios.get('/testApi' + '/query/listCategory
【前端工程化】nuxt项目，asyncData方法不触发的原因排查
qq_17335549的博客
09-29 2553
nuxt项目，asyncData方法不触发的原因排查
Nuxt.js的异步数据-asyncData
11-19 966
asyncData()方法 基本用方法： 它会将asyncData返回的数据融合组件data方法返回数据一并给组件 调用时机：服务端渲染期间和客户端路由更新之前 注意事项： asyncData()只能在页面组件上使用 没有this,因为它是在组件初始化之前被调用的 代码案例 <template> <div> <h1>{{ title }}</h1> .
vue的服务端渲染框架-nuxt之asyncdata
weixin_44284981的博客
10-23 1921
最近项目中用到了nuxt这款服务端框架，由于对框架的了解不多，因此在使用是遇到了关于asyncData的坑 现在做一个笔记记录一下我所遇到的问题 首先我们先来了解一下asyncData的作用 asyncData是nuxt中 在服务器或者路由更新之前被调用 可以直接向服务器请求数据 asyncData 仅限于在当前的页面组件中请求数据 即只可以在父组件请求数据 不可以在子组件请求数据 asyncData 可以通过return 返回数据 ，并且返回的数据就是 data中的数据 可以直接在组件中使用 asy
nuxtjs中asyncData异步数据请求、代理配置、fetch网络请求、vuex的使用、中间件处理
月光晒了很凉快的博客
11-30 6775
它可以在服务端或路由更新之前被调用。注意：在上面的案例中，虽然是服务端渲染，但还是需要后端做跨域处理，因为单单刷新当前请求数据的页面（或者是地址栏回车）时，由于是服务端渲染，所以不存在跨域，但是如果时通过路由跳转到当前页面时，就会出现跨域问题。我们在第一小节中就知道，asyncData 方法只能在页面组件中使用，而子组件在 components 中，假如我们现在要将网络请求写在子组件中，该怎么做呢？// 如果在此处你进行网络请求，在没有设置baseUrl或代理时，请一定要写全路径，否则得不到你想要的请求。
Nuxt项目中asyncData()方法中axios请求的使用
weixin_43337481的博客
05-11 684
它会将asyncData返回的数据融合组件data方法返回数据一并给组件。没有this,因为它是在组件初始化之前被调用的。调用时机：服务端渲染期间和客户端路由更新之前。asyncData()只能在页面组件上使用。asyncData()方法。
nuxt的asyncData的坑(刷新页面报错)
weixin_45645373的博客
06-24 5374
asyncData 刚接触asyncData就踩了坑，和大家分享一下。 代码如下 template> <div> asyncdata页面 {{ info }} </div> </template> <script> import axios from 'axios' export default { async asyncData () { const data = await axios.get('https:/
nuxt 中的asyncData和fetch方法及区别
weixin_46331416的博客
03-15 3578
1. asyncData()和fetch()的相同点 参数是一个object,为context(上下文) ：被设定为当前页面的上下文对象 参考官方上下文 //asyncData()(context) { fetch()(context) { // Universal keys const { app, //包含所有插件的 Vue 根实例。例如：在使用 axios 的时候，你想获取 $axios 可以直接通过 context.app.$axios 来获取 store,
五十一、进阶之Nuxt-------asyncData(请求数据)
sunnnnh的博客
03-19 2778
注意：在当前页面刷新时，服务端执行此函数； 从其他也买你跳转过来时，客户端执行此函数； （1）获取正在热映的电影信息，显示到页面 使用这种方式，可以直接在后端获取数据，将渲染好的页面交给前端 1. 引入axios 2. 获取数据 3. 显示到页面 （2）asyncData中的参数 在detail页面获取传过来的数据 （3）点击nowplaying中的电影，将其详细信息显示到detail页面 ...
Nuxt页面级缓存的实现
11-20
虽然 Vue 的服务器端渲染 (SSR) 相当快速，但是由于需要为每次请求为了避免交叉请求状态污染，都创建一个新的根Vue实例，创建组件实例和虚拟 DOM 节点的开销，无法与纯基于字符串拼接的模板的性能相当。...
Nuxt.js之自动路由原理的实现方法
10-17
主要介绍了Nuxt.js之自动路由原理的实现方法，nuxt.js会根据pages目录结构自动生成vue-router模块的路由配置。非常具有实用价值，需要的朋友可以参考下
nuxtjs-device:Nuxtjs用户设备信息
05-09
Nuxtjs用户设备信息 基于对Nuxt.js用户设备信息设置使用npm将nuxtjs-device依赖项添加到项目中npm install nuxtjs-device --save 将nuxtjs-device添加到nuxt.config.js文件的modules部分{ modules: [ 'nuxtjs-device...
nuxt项目开发.zip
01-21
nuxtjs项目开发视频
分享：nuxtasyncData 方法
awseda的博客
06-01 1373
asyncData 方法 asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。 注意：由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。 Nuxt.js 提供了几种不同的方法来使
nuxt从零搭建登录鉴权asyncData异步数据
weixin_43443341的博客
09-23 889
nuxt从零搭建登录鉴权异步数据asyncData
nuxt3中的useAsyncData使用详解
CXW1014的专栏
02-08 4298
/ 定义一: function useAsyncData(handler :(nuxtApp?: AsyncDataOptions < DataT >) : AsyncData < DataT > // 定义二: function useAsyncData(key : string , handler :(nuxtApp?: AsyncDataOptions < DataT >) : Promise < AsyncData < DataT >> // 两个主要区别就是一个没有key,一个有key。
nuxt解决首屏加载慢问题_nuxt.js框架踩坑指南
weixin_39868959的博客
11-21 3525
Nuxt官方文档简单来说，Nuxt就是基于Vue的一个应用框架，采用服务端渲染，让你的SPA应用(Vue)也可以拥有SEO生命周期众所周知，Vue的生命周期全都跑在客户端(浏览器)，而Nuxt的生命周期有些在服务端(Node)，客户端，甚至两边都在:生命周期流程图，红框内的是Nuxt的生命周期(运行在服务端)，黄框内同时运行在服务端&&客户端上，绿框内则运行在客户端遇到的问题一、从...
nuxt asyncData请求数据失败的问题 如何解决
inksnowHL的博客
10-20 2840
失败原因 折磨，折磨，asyncData请求数据，流程很离谱 首先，asyncData只在页面级别的组件中才会执行 其次，也是重点 如果你看见这个了，那么，你就遇到问题了 我通过process.client以及process.server发现 第一次进入页面，asyncData里的请求，是在客户端请求。 第二次进入页面，asyncData里的请求，是算服务端的。 而服务端的请求，不会走代理，于是会自动在本地的127.0.0.1:80去请求数据 遇到的问题 然后，因为这两个奇怪的流程，就出现了： 第一次不
nuxt async asyncData路由跳转
最新发布
07-27
在Nuxt.js中，你可以使用`asyncData`方法来在路由跳转时进行异步数据获取。 当你使用`nuxt-link`或`this.$router.push`等方式进行路由跳转时，Nuxt.js会自动调用目标页面组件中的`asyncData`方法，该方法会在服务端...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值