頁面的meta設(shè)置對于SEO的設(shè)置非常重要，比如你現(xiàn)在要作個新聞頁面，那為了搜索引擎對新聞的收錄，需要每個頁面對新聞都有不同的title和meta設(shè)置。

首先了解nuxt下設(shè)置meta的方法

• 借助 head 屬性，Nuxt.js 可以在 nuxt.config.js 中配置應(yīng)用的 meta 信息。

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: '前端小喵', // 網(wǎng)站標(biāo)題
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '此處是網(wǎng)站描述' },
      { hid: 'keywords', name: 'keywords', content: '此處是網(wǎng)站關(guān)鍵詞' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  }
}

• 組件中Nuxt.js 使用了 vue-meta 更新應(yīng)用的 頭部標(biāo)簽(Head) 和 html 屬性。

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

動態(tài)設(shè)置meta信息

下面以一個新聞詳情的meta信息設(shè)置為例：
首先從列表傳參到詳情頁面獲取meta信息，然后再通過this綁定到頁面上。
/new頁面,傳id參數(shù)到new-id頁面
來點假數(shù)據(jù)吧

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>
...

詳情頁面接收參數(shù)，從后臺接口獲取關(guān)鍵詞，描述，標(biāo)題
來點假數(shù)據(jù)吧

{
  "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: {
      
    }
  }
}

設(shè)置head

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

這樣就設(shè)置完成了。