vue利用vue meta info設置每個頁面的title與meta信息

Posted on by

title: vue 使用 vue-meta-info 設置每個頁面的 title 和 meta 信息 #文章頁面上的顯示名稱，一般是中文

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

categories: vue #分類

tags: [vue] #文章標簽，可空，多標簽請用格式，註意:後面有個空格

description: vue 使用 vue-meta-info 設置每個頁面的 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頁面配置

<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: '這是一段網頁的描述'
   		 }
      ]
      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 來渲染頁面，那麼您需要註意的是：

由於沒有動態更新，所有的生命周期鉤子函數中，隻有 beforeCreate 和 created 會在服務器端渲染(SSR)過程中被調用。這就是說任何其他生命周期鉤子函數中的代碼（例如 beforeMount 或 mounted），隻會在客戶端執行。 此外還需要註意的是，你應該避免在 beforeCreate 和 created 生命周期時產生全局副作用的代碼，例如在其中使用 setInterval 設置 timer。在純客戶端(client-side only)的代碼中，我們可以設置一個 timer，然後在 beforeDestroy 或 destroyed 生命周期時將其銷毀。但是，由於在 SSR 期間並不會調用銷毀鉤子函數，所以 timer 將永遠保留下來。為瞭避免這種情況，請將副作用代碼移動到 beforeMount 或 mounted 生命周期中。

基於以上約束，我們目前可以使用靜態的數據來渲染我們的metaInfo，下面給出一個使用示例：

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

此時vueMetaInfo會幫我們在ssr的context中掛載出一個title變量和一個render對象。類似於這樣：

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>

這樣便可以渲染出需要的數據。值得註意的是：雖然我們可以使用

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

註意：

這種形式來定義數據，但是最終渲染出來的title 依然是 loading，因為服務端渲染除瞭created和 beforeCreate並沒有mounted鉤子。

總結

到此這篇關於vue利用vue meta info設置每個頁面的title與meta信息的文章就介紹到這瞭,更多相關vue設置頁面title與meta信息內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：