Maplexxfye 2019-10-22 09:59 采纳率: 0%
浏览 729

Nuxt.js 在动态路由_id.vue里使用asyncData,为什么会执行2次?

# Nuxt.js 在动态路由_id.vue里使用asyncData,为什么会执行2次?而且2次是同时执行的

图片说明

async asyncData(context) {
        console.log("asyncData runing");
        let categoryListData = await axios({
            method: "POST",
            url: api.categoryList,
            headers: {
                authorization: api.authCode,
                "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
            },
            transformRequest: [data => Qs.stringify(data)],
            data: {}
        }).then(response => {
            let data = response.data;
            return data.data.rows;
        }).catch(error => {
            console.log("error:", error);
        });
        context.store.commit('getCategoryList', categoryListData)
        return;
    },

图片说明
图片说明

  • 写回答

1条回答 默认 最新

  • wusp1994 2023-04-06 13:41
    关注

    在 Nuxt.js 中,动态路由组件的 _id.vue 文件可以使用 asyncData 方法来获取数据并渲染页面。当用户首次访问该页面时,Nuxt.js 会执行 asyncData 方法来获取数据并将其注入到组件的数据中,然后再渲染页面。这个过程只会执行一次,即服务器端渲染。

    当用户在浏览器中通过路由链接访问该页面时,Nuxt.js 会先进行客户端渲染,然后再获取数据并重新渲染页面。这个过程中,asyncData 方法会被执行两次,分别在客户端和服务器端执行。

    这个问题的出现可能与 Nuxt.js 客户端和服务器端渲染机制有关。客户端渲染时,Nuxt.js 会首先执行一次 asyncData 方法,以获取页面需要的数据。然后,当服务器返回数据时,Nuxt.js 会再次执行 asyncData 方法,以获取最新的数据并渲染页面。这就是为什么 asyncData 方法会被执行两次。

    如果你希望只在服务器端执行 asyncData 方法一次,可以在 nuxt.config.js 文件中配置 fetchOnServertrue,例如:

    export default {
      generate: {
        fetchOnServer: true
      }
    }
    

    这样,当用户在浏览器中通过路由链接访问该页面时,Nuxt.js 会先进行服务器端渲染,然后再进行客户端渲染,这样 asyncData 方法就只会被执行一次。

    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 MATLAB动图问题
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名