第asyncData()方法
基本用法:

它会将asyncData返回的数据融合组件data方法返回数据一并给组件

调用时机:服务端渲染期间和客户端路由更新之前

注意事项:

asyncData()只能在页面组件上使用

没有this,因为它是在组件初始化之前被调用的

代码案例一:

<script>
import axios from "axios";

export default {
  data() {
    return {
      hotCities: [],
      provinceList: [],
    };
  },
  // 当你想要动态页面内容有利于SEO或者是提升首屏渲染速度的时候,就在asyncData中请求数据
  async asyncData() {
    const res = await axios({
      method: "POST",
      url: "http://192.168.0.100:8000/city/cityArea/changeCity",
    });
    console.log(res.data);
    return {
      hotCities: res.data.hotCities,
      provinceList: res.data.provinceList
    };
  },
};
</script>

代码案例二: 

<script>
import axios from "axios";
export default {
  data() {
    return {
      hotCities: [],
    };
  },
  asyncData() {
    return axios({
      method: "POST",
      url: "http://192.168.0.100:8000/city/cityArea/changeCity",
    }).then((res) => {
      console.log(res.data);
      return {
        hotCities: res.data.hotCities,
      };
    });
  }
};
</script>

以上2种写法均可。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐