快捷導(dǎo)航

nuxt 每個(gè)頁(yè)面head標(biāo)簽內(nèi)容設(shè)置方式

更新時(shí)間：2020年11月05日 11:39:18 作者：我的小英短

這篇文章主要介紹了nuxt 每個(gè)頁(yè)面head標(biāo)簽內(nèi)容設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

導(dǎo)讀

在前面幾節(jié)課程中，我們已經(jīng)完成對(duì)首頁(yè)，jokes查詢頁(yè)，About頁(yè)面的開(kāi)發(fā)，接下來(lái)，我們來(lái)看一下每個(gè)頁(yè)面的head標(biāo)簽

內(nèi)容，我們會(huì)發(fā)現(xiàn)這三個(gè)頁(yè)面的標(biāo)簽一致，而且和nuxt.config.js配置文件的head配置保持一致；

所以我們需要對(duì)這三個(gè)頁(yè)面單獨(dú)做一個(gè)head，更加方便于SEO優(yōu)化，搜索引擎的爬??；

好，我們打開(kāi)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'
  }]
 }
 },

我們?cè)俅未蜷_(kāi)jokes.vue，編輯如下：

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

打開(kāi)about.vue，編輯如下：

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

每次設(shè)置修改之后，我們都需要打開(kāi)當(dāng)前頁(yè)面的源代碼查看一下，服務(wù)端渲染新head標(biāo)簽內(nèi)容是否生效。

補(bǔ)充知識(shí)：nuxt 為單獨(dú)的頁(yè)面或組件注入js

代碼如下

 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',
   body: true
  },
  {
   type: 'text/javascript',
   src:'https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js',
   body: true
  }
  ]
 }
 },

由于地圖只有在一個(gè)頁(yè)面使用, 沒(méi)必要全局引入,于是就在單個(gè)頁(yè)面使用

以上這篇nuxt 每個(gè)頁(yè)面head標(biāo)簽內(nèi)容設(shè)置方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue 實(shí)現(xiàn)分頁(yè)與輸入框關(guān)鍵字篩選功能
這篇文章主要介紹了Vue 實(shí)現(xiàn)分頁(yè)+輸入框關(guān)鍵字篩選功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-01-01
vue使用vuedraggable插件實(shí)現(xiàn)拖拽效果
這篇文章主要介紹了vue使用vuedraggable插件實(shí)現(xiàn)拖拽效果,本文分步驟介紹了安裝vuedraggable插件的方法及頁(yè)面引入的方法,需要的朋友可以參考下
2024-04-04
解讀vue頁(yè)面監(jiān)聽(tīng)store值改變問(wèn)題
這篇文章主要介紹了解讀vue頁(yè)面監(jiān)聽(tīng)store值改變問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。
2022-10-10
解決element-ui el-checkbox的一些坑
這篇文章主要介紹了解決element-ui el-checkbox的一些坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue前端利用slice()方法實(shí)現(xiàn)分頁(yè)器
分頁(yè)功能是常見(jiàn)的需求之一，本文主要介紹了Vue前端利用slice()方法實(shí)現(xiàn)分頁(yè)器，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
Vue.js每天必學(xué)之?dāng)?shù)據(jù)雙向綁定
Vue.js每天必學(xué)之?dāng)?shù)據(jù)雙向綁定，如何進(jìn)行綁定，如何進(jìn)行數(shù)據(jù)雙向綁定，感興趣的小伙伴們可以參考一下
2016-09-09
一篇文章帶你搞懂Vue虛擬Dom與diff算法
這篇文章主要給大家介紹了關(guān)于Vue虛擬Dom與diff算法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
開(kāi)啟Vue項(xiàng)目缺少node_models包的問(wèn)題及解決
這篇文章主要介紹了開(kāi)啟Vue項(xiàng)目缺少node_models包的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue axios請(qǐng)求成功卻進(jìn)入catch的原因分析
這篇文章主要介紹了vue axios請(qǐng)求成功卻進(jìn)入catch的原因分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
vue3中setup聲明變量的方式匯總
本文給大家介紹Vue3中setup()函數(shù)中聲明變量的幾種方法,希望本文能夠幫助你更好地理解Vue3的開(kāi)發(fā)方式,感興趣的朋友跟隨小編一起看看吧
2023-11-11