溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

vue如何利用vue meta info設(shè)置每個(gè)頁(yè)面的title與meta信息

發(fā)布時(shí)間：2021-10-26 09:06:28 來(lái)源：億速云 閱讀：728 作者：小新 欄目：開(kāi)發(fā)技術(shù)

這篇文章主要介紹了vue如何利用vue meta info設(shè)置每個(gè)頁(yè)面的title與meta信息，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

title: vue 使用 vue-meta-info 設(shè)置每個(gè)頁(yè)面的 title 和 meta 信息 #文章頁(yè)面上的顯示名稱(chēng)，一般是中文

date: 2019-11-20 16:30:16 #文章生成時(shí)間，一般不改，當(dāng)然也可以任意修改

categories: vue #分類(lèi)

tags: [vue] #文章標(biāo)簽，可空，多標(biāo)簽請(qǐng)用格式，注意:后面有個(gè)空格

description: vue 使用 vue-meta-info 設(shè)置每個(gè)頁(yè)面的 title 和 meta 信息

如需使用 vue-meta-info 配置title和meta按照以下步驟：

1.安裝

npm install vue-meta-info --save

2.在main.js引入

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

3.在vue頁(yè)面配置

<template>
  ...
</template>
 
<script>
  export default {
    metaInfo: {
      title: 'My Example App', // set a title
      meta: [   // set meta
      	{                
        	name: 'keyWords',
        	content: 'My Example App'
      	},
      	{
        	name: 'description',
        	content: '這是一段網(wǎng)頁(yè)的描述'
   		 }
      ]
      link: [{                 // set link
       		rel: 'asstes',
        	href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</script>

如果你的title或者meta是異步加載的，那么你可能需要這樣使用

<template>
  ...
</template>
 
<script>
  export default {
    name: 'async',
    metaInfo () {
      return {
        title: this.pageName
      }
    },
    data () {
      return {
        pageName: 'loading'
      }
    },
    mounted () {
      setTimeout(() => {
        this.pageName = 'async'
      }, 2000)
    }
  }
</script>

如果您使用了Vue SSR 來(lái)渲染頁(yè)面，那么您需要注意的是：

由于沒(méi)有動(dòng)態(tài)更新，所有的生命周期鉤子函數(shù)中，只有 beforeCreate 和 created 會(huì)在服務(wù)器端渲染(SSR)過(guò)程中被調(diào)用。這就是說(shuō)任何其他生命周期鉤子函數(shù)中的代碼（例如 beforeMount 或 mounted），只會(huì)在客戶(hù)端執(zhí)行。 此外還需要注意的是，你應(yīng)該避免在 beforeCreate 和 created 生命周期時(shí)產(chǎn)生全局副作用的代碼，例如在其中使用 setInterval 設(shè)置 timer。在純客戶(hù)端(client-side only)的代碼中，我們可以設(shè)置一個(gè) timer，然后在 beforeDestroy 或 destroyed 生命周期時(shí)將其銷(xiāo)毀。但是，由于在 SSR 期間并不會(huì)調(diào)用銷(xiāo)毀鉤子函數(shù)，所以 timer 將永遠(yuǎn)保留下來(lái)。為了避免這種情況，請(qǐng)將副作用代碼移動(dòng)到 beforeMount 或 mounted 生命周期中。

基于以上約束，我們目前可以使用靜態(tài)的數(shù)據(jù)來(lái)渲染我們的metaInfo，下面給出一個(gè)使用示例：

<template>
  ...
</template>
 
<script>
  export default {
    metaInfo: {
      title: 'My Example App', // set a title
      meta: [{                 // set meta
        name: 'keyWords',
        content: 'My Example App'
      }]
      link: [{                 // set link
        rel: 'asstes',
        href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</script>

此時(shí)vueMetaInfo會(huì)幫我們?cè)趕sr的context中掛載出一個(gè)title變量和一個(gè)render對(duì)象。類(lèi)似于這樣：

context = {
  ...
  title: 'My Example App',
  render: {
    meta: function () { ... },
    link: function () { ... }
  }
}

至此，我們可以改造我們的模板：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{title}}</title>
    {{{render.meta && render.meta()}}}
    {{{render.link && render.link()}}}
  </head>
  <body>
    <!--vue-ssr-outlet-->
  </body>
</html>

這樣便可以渲染出需要的數(shù)據(jù)。值得注意的是：雖然我們可以使用

<template>
  ...
</template>
 
<script>
  export default {
    name: 'async',
    metaInfo () {
      return {
        title: this.pageName
      }
    },
    data () {
      return {
        pageName: 'loading'
      }
    },
    mounted () {
      setTimeout(() => {
        this.pageName = 'async'
      }, 2000)
    }
  }
</script>

注意：

這種形式來(lái)定義數(shù)據(jù)，但是最終渲染出來(lái)的title 依然是 loading，因?yàn)榉?wù)端渲染除了created和 beforeCreate并沒(méi)有mounted鉤子。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue如何利用vue meta info設(shè)置每個(gè)頁(yè)面的title與meta信息”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手