導讀

在前面幾節課程中，我們已經完成對首頁，jokes查詢頁，About頁面的開發，接下來，我們來看一下每個頁面的head標籤

內容，我們會發現這三個頁面的標籤一致，而且和nuxt.config.js配置檔案的head配置保持一致；

所以我們需要對這三個頁面單獨做一個head，更加方便於SEO優化，搜尋引擎的爬取；

好，我們開啟index.vue，編輯如下：

head(){
 return {
  title: 'jokes home page',meta: [{
  hid: "description",name: "description",content: "this is funny jokes home page"
  },{
  hid: 'viewport',name: 'viewport',content: 'width=device-width,initial-scale=1.0'
  }]
 }
 },

我們再次開啟jokes.vue，編輯如下：

head(){
 return {
  title: 'jokes page',content: "funny jokes page"
  }]
 }
 },

開啟about.vue，編輯如下：

head(){
 return {
  title: 'about page',meta: [{
  hid: "page description",content: "funny jokes about page"
  }]
 }
},

每次設定修改之後，我們都需要開啟當前頁面的原始碼檢視一下，服務端渲染新head標籤內容是否生效。

補充知識：

程式碼如下

 head() {
 return {
  script: [
  {
   charset: 'utf-8',src:'https://map.qq.com/api/js?v=2.exp&key=3',body: true
  },{
   type: 'text/javascript',src: 'https://3gimg.qq.com/lightmap/api_v2/2/4/127/main.js',src:'https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js',body: true
  }
  ]
 }
 },

由於地圖 只有在一個頁面使用,沒必要全域性引入,於是就在單個頁面使用

以上這篇nuxt 每個頁面head標籤內容設定方式就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。