nuxt中head(meta)的动态使用心得

nuxt完美的解决了vue对seo不亲和的问题，这里就来讨论一下nuxt提供的head的使用。

首先官方在nuxt.config.js中nuxt提供了一个head属性的用法，这里是一个全局的默认head属性

head: {
    title: process.env.npm_package_name || '',
    meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: 'my website description' },
    ],
    link: [
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
    ],
    script: []
    },

当我们需要通过后端返回的数据动态展示我们需要的meta信息来方便seo时，我们就需要在页面里添加一个head属性，(hid作为唯一标识保持一致)

 但是我们正常调用接口都是在mounted里面调用然后发现页面数据是显示出来了，但是我们要的meta信息还是undefined,因为mounted不适合nuxt的服务端渲染 ，这时候就要说一下nuxt提供的asyncData钩子,asyncData可以获取上下文信息,用一个文章详情页面为例

head () {
   return {
      title: this.dataList.metaTitle,
      meta: [
         { name:'keywords', content: this.dataList.metaKeyword},
         { hid: 'description', name: 'description', content:this.dataList.metaDescription }
      ]
   }
},

async asyncData({params}){
   if(process.server){
      let articleId = params.policyDetails.substr(0,params.policyDetails.length - 2); //截取文章编号
      let id = params.policyDetails.substr(params.policyDetails.length - 2,1); //截取文章类型
      let screenType = params.policyDetails.substr(params.policyDetails.length - 1,1); //截取筛选类型
      const res = await axios.get(process.env.ASYNC_DATA_API+'/policy/detail?number='+articleId+'&type='+id+'&token='+ screenType);
      if(!res.data || !res.data.data || !res.data.data.detail){
          return{
             dataList: {},
             data: {}
          }
      }else if(res.data.data.detail){
          return { 
             dataList : res.data.data.detail,
             data: res.data.data
           }
       }
    }
},

这样我们再查看源码时 我们的meta信息就都显示出来了

 初次使用nuxt感觉还不错，如果有遇到什么问题大家也可以一起交流-_-。