Nuxt.js 安装自带的axios，修改head标题title,关键词,描述，渲染数据

axios官方地址：https://axios.nuxtjs.org/setup

async-data官方地址：https://www.nuxtjs.cn/guide/async-data

模拟数据

JsonData.json

文件放在 static/js/JsonData.json

{
  "head": {
    "title": "第一个测试程序",
    "keywords": "第一个测试程序的关键词",
    "description": "第一个测试程序的描述"
  },
  "list": [
    {
      "name": "云飞",
      "age": 21
    },
    {
      "name": "蕾蕾",
      "age": 22
    },
    {
      "name": "俊俊",
      "age": 23
    },
    {
      "name": "甜甜",
      "age": 24
    },
    {
      "name": "糖糖",
      "age": 25
    }
  ]
}

第一步：安装

npm install @nuxtjs/axios

第二步：nuxt.config.js设置

modules: ['@nuxtjs/axios']
axios: {}

您现在可以在Nuxt应用中使用$ axios 

uxt.config.js以配置将应用于所有请求的全局选项

 第三步：执行

html

        <h1>新的</h1>
        <h3>IP：{{ip}}</h3> 
        <h3>title:{{title}}</h3> 
        <ul>
          <li v-for="(data,index) in list" :key="index">{{data.name}}+index:{{index}}</li>
        </ul>

js

<script>

export default {
//async asyncData({ $axios }) { 
//let data = await $axios.$get('/js/JsonData.json');  
// const seo=data.head;
//var list=data.list;
//return {seo,list}
//},
async asyncData({app}) {
  const $axios = app.$axios;  
  let data = await $axios.$get('/js/JsonData.json');  
    const seo=data.head;
    var list=data.list;
    return {seo,list}
},
  data() { 
    return {
      title: "首页", 
      ip: '0.0.0.0',
      list:[]
    }
  },
  head() {
    return {
      title: this.seo.title+'_'+this.title,
      meta: [
        { hid: 'keywords', name: 'keywords', content: this.seo.keywords },
        { hid: 'description', name: 'description', content: this.seo.description }
      ]
    }
  },

}
</script>

有时候会报错，可以把上面的asyncData替换成

async asyncData({app}) {
   const $axios = app.$axios;  
  const data= await $axios.$get('/js/JsonData.json')
  console.log(data)
},

 方法调用时

let data = this.$axios.$get('./js/JsonData.json');  
console.log(data.head)

* 注意常量的使用

 

效果

seo

列表

---

进阶：

NuxtJS中使用axios，Nuxt封装axios请求

https://blog.csdn.net/qq_41980461/article/details/112985439