使用Nuxt.js的asyncData服务端异步获取数据

最新推荐文章于 2023-06-10 10:13:16 发布
最新推荐文章于 2023-06-10 10:13:16 发布
阅读量1.1k 收藏 1
点赞数 1
文章标签： vue javascript es6 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44466651/article/details/110928027
版权

前情 - 访问地址：http://localhost:3000/artical/articalDetail/fc4342ffb0884d609fe1cb39f1911a2f
前情 - 目录结构：（名字有所出入，不过不影响）
名字有所出入，不过不影响

一开始的解法，觉得是路由路径的最后一项

async asyncData({
    route }) {
   
  let path = route.path.split("/");
  let uuid = path[path.length - 1]
最低0.47元/天 解锁文章
随意的ID
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
nuxtjs 的asyncData 和 async asyncData获取数据
我爱吃红薯的博客
10-24 8686
1，asyncData 和 async asyncData asyncData 和 async asyncData 都可以获取后端传递来的数据，asyncData每次在加载页面组件之前都会调用。asyncData 还有一个上下文context参数: context.params 方式1：asyncData，异步方式 export default { asyncData({ params }) { return axios.get(`https://my-api/posts/$..
用nuxt asyncData
weixin_30872157的博客
07-15 839
async asyncData () { const asyncData1 = {}; let rows = await this.getsyn(); asyncData1.myitems = rows asyncData1.haha = 'haha1' ...
nuxtjs中asyncData异步数据请求、代理配置、fetch网络请求、vuex的使用、中间件处理
月光晒了很凉快的博客
11-30 7222
它可以在服务端或路由更新之前被调用。注意：在上面的案例中，虽然是服务端渲染，但还是需要后端做跨域处理，因为单单刷新当前请求数据的页面（或者是地址栏回车）时，由于是服务端渲染，所以不存在跨域，但是如果时通过路由跳转到当前页面时，就会出现跨域问题。我们在第一小节中就知道，asyncData 方法只能在页面组件中使用，而子组件在 components 中，假如我们现在要将网络请求写在子组件中，该怎么做呢？// 如果在此处你进行网络请求，在没有设置baseUrl或代理时，请一定要写全路径，否则得不到你想要的请求。
SSR,nuxt项目vue框架获取当前路由的路径URL
最新发布
weixin_43337481的博客
06-10 766
【代码】SSR,nuxt项目vue框架获取当前路由的路径URL。
asyncdata连接php,如何使用Nuxt和asyncData观察路由更改
weixin_35657612的博客
03-21 79
大家好我想在我的nuxt js应用程序中观察路线变化 .这是我的中间件：export default function ({ route }) {return route; but i don't know what to write here}index.vue文件middleware: [routeReact]我想写这个：app.context.route = route但它告诉我app.co...
详解Nuxt.js Vue服务端渲染摸索
11-27
Nuxt.js 引入了 `asyncData` 方法，它允许你在服务器端获取异步数据，以填充组件的初始状态。这个方法只能在页面组件中使用，不能在普通组件中调用。需要注意的是，`beforeCreate` 和 `created` 是 Vue 生命周期中仅...
详解Vue基于 Nuxt.js 实现服务端渲染（SSR）
12-11
几小时后，一个基于 Vue.js 的服务端渲染应用框架应运而生，与 Next.js 异曲同工，这就是Nuxt.js 一、快速模板 在已经安装了 vue-cli 的前提下，可以快速创建一个 nuxt 的项目模板 vue init nuxt-community/...
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
10-17
主要介绍了详解使用Nuxt.js快速搭建服务端渲染(SSR)应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
如何在 Nuxt 的页面中获取路由 url 参数？
weixin_43337481的博客
06-09 1217
我在访问我的nuxt js插件中的url时遇到了问题。简而言之: url中有一部分向我显示了人们从哪个城市访问。无法工作，因为nuxt generate已在staging/production上运行。无法工作，因为它是SSR，而window在那里不可用。
Nuxt在asyncData中获取路径参数用于发送请求
weixin_45966674的博客
04-05 1266
可能就会有人说 在 asyncData生命周期里用this.$route.params.路径参数 不就完事了吗？可以看到 这里面也有一个 params 里面的参数和我们的this.$route.params是对得上的。但你要知道 asyncData是一个服务端渲染的生命周期 他还没到页面呢 你用了就会报错成这样。例如 你访问了 id 为111的文章的详情页 到详情页就需要发送111的请求。但我们需要结合啊 我们需要通过路径上的参数 去发送网络请求。
VueJS取得URL参数
John的专栏
05-11 6408
vuejs取得URL中参数的值地址：http://localhost:3333/#/index?id=001结果：001console.log(this.$route.query.id)
(四)01 -异步数据——asyncData方法获取异步数据 & Nuxt.js提供使用 async方法获取接口数据 & 在线测试接口的使用
weixin_44867717的博客
03-21 6456
异步数据——asyncData方法获取异步数据 & Nuxt.js提供使用 async方法获取接口数据 & 在线测试接口的使用 教程 Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。 asyncData 方法 asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更...
asyncdata 获取参数_Egg Vue SSR 服务端渲染数据请求与asyncData
weixin_39755218的博客
12-22 1097
服务端渲染 Node 层直接获取数据在 Egg 项目如果使用模板引擎规范时通是过 render 方法进行模板渲染，render 的第一个参数模板路径，第二个参数时模板渲染数据. 如如下调用方式：async index(ctx) {// 获取数据，可以是从数据库，后端 Http 接口 等形式const list = ctx.service.article.getArtilceList();// 对模...
nuxt的asyncdata踩坑
weixin_43019339的博客
11-11 7386
介绍 asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件 注意：由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。 全局配置 module.exports = {
nuxt.js asyncdata请求封装
06-10
在 Nuxt.js 中使用 asyncData 方法可以在服务器端获取数据，并在渲染 HTML 之前将其注入到应用程序的状态中。为了使数据请求更加简单和可重用，我们可以将其封装在一个可复用的函数中。以下是一个简单的示例： ```javascript // api.js 文件 import axios from 'axios' export const fetchData = async (url) => { try { const response = await axios.get(url) return response.data } catch (error) { console.error(error) } } // 页面组件中使用 import { fetchData } from '~/api.js' export default { asyncData({ params }) { return { data: fetchData(`https://example.com/api/${params.id}`) } } } ``` 在上面的示例中，我们创建了一个名为 fetchData 的函数，它接受一个 URL 参数并使用 axios 库发出 GET 请求。在组件的 asyncData 方法中，我们可以调用 fetchData 并传递所需的 URL。asyncData 会等待 fetchData 函数返回数据，然后将其注入到组件的 data 属性中。请注意，fetchData 函数返回的是一个 Promise 对象，因此我们需要使用 async/await 或 .then() 方法来处理返回的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值