nuxt动态设置关键词，描述，标题

页面的meta设置对于SEO的设置超级重大，列如你目前要作个新闻页面，那为了搜索引擎对新闻的收录，需要每个页面对新闻都有不同的title和meta设置。

第一了解nuxt下设置meta的方法

• 借助 head 属性，Nuxt.js 可以在 nuxt.config.js 中配置应用的 meta 信息。

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title:  前端小喵 , // 网站标题
    meta: [
      { charset:  utf-8  },
      { name:  viewport , content:  width=device-width, initial-scale=1  },
      { hid:  description , name:  description , content:  此处是网站描述  },
      { hid:  keywords , name:  keywords , content:  此处是网站关键词  }
    ],
    link: [
      { rel:  icon , type:  image/x-icon , href:  /favicon.ico  }
    ]
  }
}

• 组件中Nuxt.js 使用了 vue-meta 更新应用的 头部标签(Head) 和 html 属性。

head(){
  return{
    title: `前端小喵`,
    meta:[
      {hid: description ,name: description ,content:  前端小喵 },
      {hid: keywords ,name: keywords ,content:  前端小喵 }
    ]
  }
}

动态设置meta信息

下面以一个新闻详情的meta信息设置为例：
第一从列表传参到详情页面获取meta信息，然后再通过this绑定到页面上。
/new页面,传id参数到new-id页面
来点假数据吧

list: [
  {
    id:  1 ,
    title:  前端小喵 
  },
  {
    id:  2 ,
    title:  前端小喵 
  }
]

<li v-for="(item, index) in list" :key=" list_ +item.id">
  <nuxt-link :to="`/new/${item.id}`" :title="item.title">
    {{item.title}}
  </nuxt-link>
</li>
...

详情页面接收参数，从后台接口获取关键词，描述，标题
来点假数据吧

{
  "code":0,
  "message":"success",
  "data":{
    "id":1,
    "title":"前端小喵",
    "keywords": "前端小喵",
    "description": "前端小喵"
  }
}

async asyncData({ store, params, error, req, query }) {
  try {
    const isServer = process.server
    const token = isServer ? req.cookies[TokenKey] : getToken()
    let { id } = params
    let par = {
      id: id
    }
    let [detialRes,] = await Promise.all([
      user_api_send( /api/*********** , par,  post , token),
    ])
    return {
      detial: detialRes.data
    }
  } catch(err) {
    console.log(err)
  }
},
data() {
  return {
    detial: {
      
    }
  }
}

设置head

head(){
  return{
    title: `前端小喵-${this.detial.title}`,
    meta:[
      {hid: description ,name: description ,content: this.detial.description ||  前端小喵 },
      {hid: keywords ,name: keywords ,content: this.detial.keywords ||  前端小喵 }
    ]
  }
}

这样就设置完成了。