metainfo可以设置说明_利用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 属性

name:'App',

metaInfo: {//如果子component中没有定义 metaInfo.title ，会默认使用这个title

title: '首页',

titleTemplate:'%s | 我的Vuejs网站'}

}

name:'Home',

metaInfo: {//这里的 title 会替换 titleTemplate 中的字符占位

title: '这是一个首页',//这里定义titleTemplate会覆盖App.vue中的定义

titleTemplate: null}

}

如果想定义其他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格式的标签

returnfunction titleGenerator (type, data) {return{

text () {return `${data}${type}>`

}

}

}

3、__dangerouslyDisableSanitizers 做了什么？

vue-meta 默认会对特殊字符串进行转义，如果设置了 __dangerouslyDisableSanitizers，就不会对再做转义处理。

const escapeHTML = (str) => typeof window === 'undefined'

//server-side escape sequence

?String(str)

.replace(/&/g, '&')

.replace(/

.replace(/>/g, '>')

.replace(/"/g, '"')

.replace(/'/g,''')//client-side escape sequence

: String(str)

.replace(/&/g, '\u0026')

.replace(/

.replace(/>/g, '\u003e')

.replace(/"/g, '\u0022')

.replace(/'/g,'\u0027')