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

最新推荐文章于 2024-01-18 14:24:06 发布
最新推荐文章于 2024-01-18 14:24:06 发布
阅读量2.1k 收藏 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传值了
在这里插入图片描述

仙女爱吃鱼
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
asyncdata 获取参数_Nuxt之asyncData方法获取数据
weixin_35741582的博客
02-23 4063
在项目中需要在初始化页面前先得到数据，也就是我们常说的异步请求数据。Nuxt.js贴心的为我们扩展了Vue.js的方法，增加了anyncData方法。从名字上就很好理解，这是一个异步的方法。一. 创建远程数据在这里制作一些假的远程数据，我选择的网站是myjson.com，它是一个json的简单仓库，学习使用是非常适合的。 我们打开网站，在对话空中输入JSON代码，这个代码可以自己随意输入哦。{"n...
nuxt3服务端获取数据demo.rar
11-26
nuxt3服务端获取数据demo.rar. nuxt3. Ts ssr 在服务端获取数据，随html一起返回浏览器的demo。封装好的 get 跟post请求 可以方便移植到项目中，或者直接在这修改！欢迎下载。免c币下载地址：...
nuxtjs中asyncData异步数据请求、代理配置、fetch网络请求、vuex的使用、中间件处理
月光晒了很凉快的博客
11-30 7142
它可以在服务端或路由更新之前被调用。注意：在上面的案例中，虽然是服务端渲染，但还是需要后端做跨域处理，因为单单刷新当前请求数据的页面（或者是地址栏回车）时，由于是服务端渲染，所以不存在跨域，但是如果时通过路由跳转到当前页面时，就会出现跨域问题。我们在第一小节中就知道，asyncData 方法只能在页面组件中使用，而子组件在 components 中，假如我们现在要将网络请求写在子组件中，该怎么做呢？// 如果在此处你进行网络请求，在没有设置baseUrl或代理时，请一定要写全路径，否则得不到你想要的请求。
nuxt的asyncdata踩坑
weixin_43019339的博客
11-11 7379
介绍 asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件 注意：由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。 全局配置 module.exports = {
记录Nuxt.js中开发遇到的坑
未来可期
04-17 3764
开发基于Nuxt.js博客中遇到的大坑
dialog能提交数据吗_PostgreSQL中同样是别人提交的数据，为什么你能看到，我却看不到？...
weixin_39628070的博客
11-27 128
作者： 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 2932
失败原因 折磨，折磨，asyncData请求数据，流程很离谱 首先，asyncData只在页面级别的组件中才会执行 其次，也是重点 如果你看见这个了，那么，你就遇到问题了 我通过process.client以及process.server发现 第一次进入页面，asyncData里的请求，是在客户端请求。 第二次进入页面，asyncData里的请求，是算服务端的。 而服务端的请求，不会走代理，于是会自动在本地的127.0.0.1:80去请求数据 遇到的问题 然后，因为这两个奇怪的流程，就出现了： 第一次不
nuxt asyncData应该注意的一个问题 asyncData不执行问题
inksnowHL的博客
10-06 1740
asyncData只在页面组件级别会被调用，而页面组件的子组件级别，根本就不会执行！ 很简短，但是很重要。
Nuxt之asyncData方法获取数据
热门推荐
weixin_33875839的博客
12-03 1万+
在项目中需要在初始化页面前先得到数据，也就是我们常说的异步请求数据。Nuxt.js贴心的为我们扩展了Vue.js的方法，增加了anyncData方法。从名字上就很好理解，这是一个异步的方法。一. 创建远程数据在这里制作一些假的远程数据，我选择的网站是myjson.com，它是一个json的简单仓库，学习使用是非常适合的。 我们打开网站，在对话空中输入JSON代码，这个代码可以自己随意输入哦。{ ...
Nuxt3组件的使用与布局模板的学习源码
03-26
在这个源码中，我们将深入学习如何在Nuxt3中使用组件以及布局模板的构建。 首先，我们要理解Nuxt3中的组件系统。Nuxt3基于Vue3，因此它支持Vue3的所有组件特性，如Composition API、Teleport、Suspense等。...
Nuxt使用Vuex的方法示例
10-16
主要介绍了Nuxt使用Vuex的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
nuxt中使用路由守卫的方法步骤
12-01
1.在plugins文件下创建一个route.js import { getCookie, setCookie } from '@/pages/logreg/api/cookie' import axios from 'axios' export default ({ app, store }) => { app.router.beforeEach((to, from, ...
nuxt.js ssr asyncData 请求传参FromData格式后端拿不到的问题(已解决)
lllomh的博客
04-02 652
这遇到一个坑，记录一下。网上相关有用资料几乎没有。大多情况下都是传参格式用FromData传参的！ 这里用 nuxt ssr 在FromData 传参的时候会遇到这个毛病，在前端渲染请求的时候是这样 created(){ this.$axios.$post(P_PRODUCT_DETAILS,{product_id:2}).then(res => { console.log(res) }).catch(e => { console...
Nuxt.js 分页获取数据（及更新子组件数据、不刷新页面，异步请求追加数据）
卡尔特斯
06-16 3122
在 服务器渲染 模式中，分页获取数据常见的方式是： 服务器数据全返前端自行处理 ajax 请求数据回来本地拼接标签 链接带分页参数进行获取 在 nuxt.js 中，差不多也是类似，可以使用 链接带分页参数进行获取 这种方式。 案例一：当前页面进行分页获取数据 <template> <div class="content-view"> <!-- 列表数据 --> <a-list class="list-view" ite..
Asycntast异步
oooooooooop的博客
06-09 157
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...
el-from 中的 el-date-picker 清空问题，使用async后， 判断是否为undefined陷阱（vue2+element+express）
Yedge的博客
12-13 782
el-from 中的 el-date-picker 清空问题，点击清空后，表单提交的时间为undefined
【前端工程化】nuxt项目，asyncData方法不触发的原因排查
qq_17335549的博客
09-29 2705
nuxt项目，asyncData方法不触发的原因排查
类型“{}”上不存在属性“XXX”
2301_80185446的博客
01-18 885
类型“{}”上不存在属性“XXX”
Rust案例分析.docx
最新发布
07-16
Rust 是一种系统编程语言，具有内存安全、并发编程和高性能等特点。下面是一个 Rust 案例分析，展示如何使用 Rust 开发一个简单的命令行程序，该程序将读取文件内容并统计文件中的单词数量。
nuxt中的middleware获取不到state
03-06
对于这个问题，我可以回答。在 Nuxt 中，middleware 是在服务端和客户端都会执行的函数，它可以访问到 Vuex 的 state。但是需要注意的是，在服务端执行 middleware 时，state 是从服务端获取的，而在客户端执行 middleware 时，state 是从服务端渲染的 HTML 中获取的。如果您的 middleware 无法获取到 state，可能是因为您的 state 没有被正确初始化或者您的 middleware 的执行顺序不正确。您可以检查一下您的代码，或者提供更多的细节，以便我能够更好地帮助您解决问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值