Use vue-meta tag management head

　　In Vue SPA applications, if you want to modify the HTML head tag, perhaps, you will be in the code directly to do

// change the title 
document.title = ' What? ' 
// introduction period Script 
the let S = document.createElement ( ' Script ' ) 
s.setAttribute ( ' the src ' , ' ./vconsole.js ' ) 
document.head.appendChild (S) 
// modify the meta information or add attributes to html tags ...
 @ omitted here a big lump of code ...

　　Today to introduce a more elegant way to manage label head: vue-meta. Borrowing vue-meta github introduced on the basis of Vue 2.0 of vue-meta plugin, primarily used to manage HMTL head tag, but also support SSR.

　　vue-meta has the following characteristics:

　　1, set metaInfo in the assembly, you can easily manage the head tag

　　2, metaInfo response data is, if the data changes, the header information will be updated automatically

　　3, support for SSR

First, use

　　Installation: npm install VUE-Meta --save

　　The introduction of: introducing in main.js

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

　　Then you can start using the metaInfo. MetaInfo attributes can be defined in any component of the

<Script> 
  Export default { 
    name: ' App ' , 
    MetaInfo: { 
      // if the child component is not defined metaInfo.title, will use the default title 
      title: ' Home ' , 
      titleTemplate: ' % S | Vuejs my website ' 
    } 
  }
 </ Script>

<Script> 
  Export default { 
    name: ' Home ' , 
    MetaInfo: { 
      // here replaces titleTemplate title characters occupying 
      title: ' This is a home page ' ,
       // defined herein titleTemplate overrides defined in App.vue 
      titleTemplate: null 
    } 
  }
 </ Script>

　　If you want to define additional meta information, you can use vue-meta of the API. For example 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')

Use vue-meta tag management head

Guess you like