利用vue-meta管理頭部標簽

　　在 Vue SPA 應用中，如果想要修改HTML的頭部標簽，或許，你會在代碼里，直接這么做

// 改下title
document.title = 'what?'
// 引入一段script
let s = document.createElement('script')
s.setAttribute('src', './vconsole.js')
document.head.appendChild(s)
// 修改meta信息，或者給html標簽添加屬性...
// 此處省略一大坨代碼...

　　今天給大家介紹一種更優雅的方式，去管理頭部標簽： vue-meta。借用vue-meta github 上的介紹，基於Vue 2.0 的 vue-meta 插件，主要用於管理HMTL頭部標簽，同時也支持SSR。

　　vue-meta有以下特點：

　　1、在組件內設置 metaInfo，便可輕松實現頭部標簽的管理

　　2、metaInfo 的數據都是響應的，如果數據變化，頭部信息會自動更新

　　3、支持 SSR

一、使用方法

　　安裝：npm install vue-meta --save

　　引入：在main.js里引入

import VueMeta from 'vue-meta'
Vue.use(VueMeta)

　　然后就可以開始使用metaInfo了。在任何一個component中都可以定義 metaInfo 屬性

<script>
  export default {
    name: 'App',
    metaInfo: {
      // 如果子component中沒有定義 metaInfo.title ，會默認使用這個title
      title: '首頁',
      titleTemplate: '%s | 我的Vuejs網站'
    }
  }
</script>

<script>
  export default {
    name: 'Home',
    metaInfo: {
      // 這里的 title 會替換 titleTemplate 中的字符占位
      title: '這是一個首頁',
      // 這里定義titleTemplate會覆蓋App.vue中的定義
      titleTemplate: null
    }
  }
</script>

　　如果想定義其他meta信息，可以使用vue-meta的API。例如meta

{
  metaInfo: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ]
  }
}

　　異步請求數據定義：如果component中使用了異步請求數據，可以使用 metaInfo() 方法。

    metaInfo () {
      return {
        title: this.title,
        meta: [
          { vmid: 'description', name: 'description', content: this.description }
        ]
      }
    },

　　其中，title，description都可以是異步獲取的數據。

二、源碼分析

1、怎么區分 client 和 server渲染？

　　vue-meta 會在 beforeCreate() 鈎子函數中，將組件中設置的 metaInfo ，放在 this.$metaInfo 中。我們可以在其他生命周期中，訪問 this.$metaInfo 下的屬性。

if (typeof this.$options[options.keyName] === 'function') {
 if (typeof this.$options.computed === 'undefined') {
  this.$options.computed = {}
 }
 this.$options.computed.$metaInfo = this.$options[options.keyName]
}

　　vue-meta 會在created等生命周期的鈎子函數中，監聽 $metaInfo 的變化，如果發生改變，就調用 $meta 下的 refresh 方法。這也是 metaInfo 做到響應的原因。

created () {
 if (!this.$isServer && this.$metaInfo) {
  this.$watch('$metaInfo', () => {
   batchID = batchUpdate(batchID, () => this.$meta().refresh())
  })
 }
},

　　Server端，主要是暴露 $meta 下的 inject 方法，調用 inject 方法，會返回對應的信息。

2、client 和 server端 是如何修改標簽的？

　　client端 修改標簽，就是本文開頭提到的 通過原生js，直接修改

return function updateTitle (title = document.title) {
　　document.title = title
}

　　server端，就是通過 text方法，返回string格式的標簽

return function titleGenerator (type, data) {
 return {
  text () {
   return `<${type} ${attribute}="true">${data}</${type}>`
  }
 }
}

3、__dangerouslyDisableSanitizers 做了什么？

　　vue-meta 默認會對特殊字符串進行轉義，如果設置了 __dangerouslyDisableSanitizers，就不會對再做轉義處理。

const escapeHTML = (str) => typeof window === 'undefined'
 // server-side escape sequence
 ? String(str)
  .replace(/&/g, '&')
  .replace(/</g, '<')
  .replace(/>/g, '>')
  .replace(/"/g, '"')
  .replace(/'/g, ''')
 // client-side escape sequence
 : String(str)
  .replace(/&/g, '\u0026')
  .replace(/</g, '\u003c')
  .replace(/>/g, '\u003e')
  .replace(/"/g, '\u0022')
  .replace(/'/g, '\u0027')