利用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')