nuxt中子组件使用asyndData方法获取不到数据

最新推荐文章于 2023-11-14 10:50:56 发布
最新推荐文章于 2023-11-14 10:50:56 发布
阅读量2.2k 收藏 2
点赞数
文章标签： nuxt vue asyncData process process.env
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38318244/article/details/107359762
版权

最近项目中要加一些跳转链接的更改，我是先改的子组件，在子组件中通过asyncData想要判断是否是正式环境以区分跳转域名，搞了大半天，还在网上各种查询都还是报undefined……

在这里插入图片描述

最后回到父组件中去打印和使用发现都是可以用的，再去仔细看了一下官网，原来官网中写“asyncData只支持页面组件”的意思是只支持在pages目录下的组件中使用，真的很坑……所以nuxt中子组件是不支持使用asyncData的……那就只好使用props传值了
在这里插入图片描述

仙女爱吃鱼
关注
nuxt解决首屏加载慢问题_nuxt.js框架踩坑指南
weixin_39868959的博客
11-21 3701
Nuxt官方文档简单来说，Nuxt就是基于Vue的一个应用框架，采用服务端渲染，让你的SPA应用(Vue)也可以拥有SEO生命周期众所周知，Vue的生命周期全都跑在客户端(浏览器)，而Nuxt的生命周期有些在服务端(Node)，客户端，甚至两边都在:生命周期流程图，红框内的是Nuxt的生命周期(运行在服务端)，黄框内同时运行在服务端&&客户端上，绿框内则运行在客户端遇到的问题一、从...
使用 refreshNuxtData 刷新 Nuxt应用 中的数据
最新发布
08-21 896
refreshNuxtData 是 Nuxt 3 中一个非常有用的函数，能够帮助你在数据更新后及时刷新页面。通过了解如何刷新所有数据和刷新特定数据，你可以更灵活地控制数据更新的时机和方式。编程智域 前端至全栈交流与成长使用 refreshNuxtData 刷新 Nuxt应用 中的数据 | cmdragon’s Blog。
dialog能提交数据吗_PostgreSQL中同样是别人提交的数据，为什么你能看到，我却看不到？...
weixin_39628070的博客
11-27 168
作者： Aken文章链接：https://mp.weixin.qq.com/s/OkJaWbzcXcJtzSCOFnqeXQ文章作为DB的学习体会，若有错误欢迎指导。一、环境介绍操作系统：CentOS Linux release 7.6.1810 (Core) DB版本：PostgreSQL -11.5 on x86_64-pc-linux-gnu二、问题描述同一个实例运行的3个session，...
nuxt asyncData请求数据失败的问题 如何解决
inksnowHL的博客
10-20 3322
失败原因 折磨，折磨，asyncData请求数据，流程很离谱 首先，asyncData只在页面级别的组件中才会执行 其次，也是重点 如果你看见这个了，那么，你就遇到问题了 我通过process.client以及process.server发现 第一次进入页面，asyncData里的请求，是在客户端请求。 第二次进入页面，asyncData里的请求，是算服务端的。 而服务端的请求，不会走代理，于是会自动在本地的127.0.0.1:80去请求数据 遇到的问题 然后，因为这两个奇怪的流程，就出现了： 第一次不
nuxt asyncData应该注意的一个问题 asyncData不执行问题
inksnowHL的博客
10-06 1775
asyncData只在页面组件级别会被调用，而页面组件的子组件级别，根本就不会执行！ 很简短，但是很重要。
Nuxt3项目中的问题汇总-刷新页面useFetch无返回
qq_38661597的博客
03-09 6459
nuxt3 刷新页面的时候usefetch加了key值后，打印结果data.value是null,获取不到数据。解决1: 加个定时器（不友好）解决2： await nextTick()
Nuxt3组件的使用与布局模板的学习源码
03-26
在这个源码中，我们将深入学习如何在Nuxt3中使用组件以及布局模板的构建。 首先，我们要理解Nuxt3中的组件系统。Nuxt3基于Vue3，因此它支持Vue3的所有组件特性，如Composition API、Teleport、Suspense等。...
nuxt引入组件和公共样式的操作
01-18
补充知识：在nuxt项目中使用component组件 编写组件页面 1.在components下新建一个新建组件页面，如下所示 2.新建完成之后初始页面的代码如下所示： 3.下面从element-ui上找一个顶部导航菜单写到组件页面。 <...
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
01-18
Nuxt嵌套路由官网上的API详解：点击链接 ... 父组件的页面的内容 <!-- 进行切换子页面，写法同vue.js --> <li><nuxt to='/parent/child'>child</nuxt> <li><nuxt to='/parent/child2'>child2</nux
asyncdata 获取参数_Nuxt之asyncData方法获取数据
weixin_35741582的博客
02-23 4089
在项目中需要在初始化页面前先得到数据，也就是我们常说的异步请求数据。Nuxt.js贴心的为我们扩展了Vue.js的方法，增加了anyncData方法。从名字上就很好理解，这是一个异步的方法。一. 创建远程数据在这里制作一些假的远程数据，我选择的网站是myjson.com，它是一个json的简单仓库，学习使用是非常适合的。 我们打开网站，在对话空中输入JSON代码，这个代码可以自己随意输入哦。{"n...
Nuxt使用Vuex的方法示例
10-16
此外，Nuxt.js还提供了异步数据获取、中间件、布局系统等其他功能，使得开发出的Vue应用程序在服务器端渲染与静态生成上表现出色。 总而言之，Nuxt.js配合Vuex不仅能够简化状态管理的集成过程，还能够提供一个组织...
Nuxt之asyncData方法获取数据
热门推荐
weixin_33875839的博客
12-03 1万+
在项目中需要在初始化页面前先得到数据，也就是我们常说的异步请求数据。Nuxt.js贴心的为我们扩展了Vue.js的方法，增加了anyncData方法。从名字上就很好理解，这是一个异步的方法。一. 创建远程数据在这里制作一些假的远程数据，我选择的网站是myjson.com，它是一个json的简单仓库，学习使用是非常适合的。 我们打开网站，在对话空中输入JSON代码，这个代码可以自己随意输入哦。{ ...
nuxt.js ssr asyncData 请求传参FromData格式后端拿不到的问题(已解决)
lllomh的博客
04-02 676
这遇到一个坑，记录一下。网上相关有用资料几乎没有。大多情况下都是传参格式用FromData传参的！ 这里用 nuxt ssr 在FromData 传参的时候会遇到这个毛病，在前端渲染请求的时候是这样 created(){ this.$axios.$post(P_PRODUCT_DETAILS,{product_id:2}).then(res => { console.log(res) }).catch(e => { console...
asyncdata 获取参数_nuxt中的fetch和asyncData
weixin_39979489的博客
03-05 1221
nuxt中的fetch和asyncData是两个比较重要的概念，今天看看这两个方法使用以及他们的区别。fetch假设我们现在的代码是这样：exportdefault{asyncfetch(){this.name=awaitnewPromise((resolve,reject)=>{console.log('fetchstart');setTimeout(()=&gt...
Nuxt.js 分页获取数据（及更新子组件数据、不刷新页面，异步请求追加数据）
卡尔特斯
06-16 3242
在 服务器渲染 模式中，分页获取数据常见的方式是： 服务器数据全返前端自行处理 ajax 请求数据回来本地拼接标签 链接带分页参数进行获取 在 nuxt.js 中，差不多也是类似，可以使用 链接带分页参数进行获取 这种方式。 案例一：当前页面进行分页获取数据 <template> <div class="content-view"> <!-- 列表数据 --> <a-list class="list-view" ite..
【Nuxt】Nuxt3 解决 useFetch 首次跳转、刷新无数据的问题
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
11-14 2759
和 uuid （uuid 函数随便写个就行）
nuxt的asyncdata踩坑
weixin_43019339的博客
11-11 7506
介绍 asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件 注意：由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。 全局配置 module.exports = {
Asycntast异步
oooooooooop的博客
06-09 166
package com.example.word_day0608; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import andro...
nuxt3中的useAsyncData使用详解
CXW1014的专栏
02-08 5237
/ 定义一: function useAsyncData(handler :(nuxtApp?: AsyncDataOptions < DataT >) : AsyncData < DataT > // 定义二: function useAsyncData(key : string , handler :(nuxtApp?: AsyncDataOptions < DataT >) : Promise < AsyncData < DataT >> // 两个主要区别就是一个没有key,一个有key。
nuxt中的middleware获取不到state
03-06
如果您的 middleware 无法获取到 state，可能是因为您的 state 没有被正确初始化或者您的 middleware 的执行顺序不正确。您可以检查一下您的代码，或者提供更多的细节，以便我能够更好地帮助您解决问题。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值