nuxt单页面seo优化

1.下载axios

npm i @nuxtjs/axios -s

2. 在nuxt.config.js中配置axios

modules: [
      '@nuxtjs/axios',
  ],

 

此时， 就可以在组件中使用

async asyncData({$axios}) {
  let { res } = await $axios.get(`https://xxx.com/api/xxx`)
  console.log(res)    
 }

import Vue from 'vue'
//混入methods

Vue.mixin({
  methods:{
    $seo(title,content,payload = []){
      return {
        title,
        meta:[{
          hid:'description',//这里写原先的hid避免相互覆盖，
          name:'keywords',
          content,

        }].concat(payload)
      }
    }
  }
})

在plugins里创建mixins.js

import Vue from 'vue'
//混入methods

Vue.mixin({
  methods:{
    $seo(title,content,payload = []){
      return {
        title,
        meta:[{
          hid:'description',//这里写原先的hid避免相互覆盖，
          name:'keywords',
          content,

        }].concat(payload)
      }
    }
  }
})

然后在页面里面使用

 async asyncData({$axios}) {
      // let data = {token:'9b49f0312850415e99fe5b02b4480632',rows:1000}
      return await $axios.post('这里是地址').then(
        res =>({data:res.rows[0]})
        // res => {
        //   console.log('加载之前获取')
        //   console.log(res.rows[0])
        //
        // }
      )
},
head(){
      // console.log(this.data)
      return this.$seo(this.data.title, this.data.content,[{}])
    }