在nuxt中如何設(shè)置頁(yè)面的head標(biāo)簽

發(fā)布時(shí)間：2020-11-06 15:01:08 來(lái)源：億速云閱讀：857 作者：Leah 欄目：開發(fā)技術(shù)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)在nuxt中如何設(shè)置頁(yè)面的head標(biāo)簽，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

打開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è)俅未蜷_jokes.vue，編輯如下：

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

打開about.vue，編輯如下：

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

每次設(shè)置修改之后，我們都需要打開當(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&#63;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è)面使用, 沒必要全局引入,于是就在單個(gè)頁(yè)面使用

在nuxt中如何設(shè)置頁(yè)面的head標(biāo)簽

上述就是小編為大家分享的在nuxt中如何設(shè)置頁(yè)面的head標(biāo)簽了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

在nuxt中如何設(shè)置頁(yè)面的head標(biāo)簽

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽