详解vue-meta如何让你更优雅的管理头部标签
在 Vue SPA 应⽤中，如果想要修改HTML的头部标签，或许，你会在代码⾥，直接这么做:
// 改下title
document.title = 'what?'
// 引⼊⼀段script
let s = ateElement('script')
s.setAttribute('src', './vconsole.js')
document.head.appendChild(s)
// 修改meta信息，或者给html标签添加属性...
// 此处省略⼀⼤坨代码...
今天给⼤家介绍⼀种更优雅的⽅式，去管理头部标签 vue-meta
vue-meta介绍
Manage page meta info in Vue 2.0 components. SSR + Streaming supported. Inspired by react-helmet.
借⽤上的介绍，基于Vue 2.0 的 vue-meta 插件，主要⽤于管理HMTL头部标签，同时也⽀持SSR。
vue-meta有以下特点：
1. 在组件内设置 metaInfo，便可轻松实现头部标签的管理
2. metaInfo 的数据都是响应的，如果数据变化，头部信息会⾃动更新
3. ⽀持 SSR
如何使⽤
在介绍如何使⽤之前，先和⼤家普及⼀个最近很⽕的名词服务端渲染（SSR, Server Side Render），简单来讲，就是在访问某个页⾯时，服务端会把渲染好的页⾯，直接返回给浏览器。
我们知道 vue-meta 是⽀持SSR的，下⾯的介绍分成两部分：
Client 客户端
在⼊⼝⽂件中，install vue-meta plugin
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueMeta from 'vue-meta'
Vue.use(VueRouter)
Vue.use(VueMeta)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
然后就可以在组件中使⽤了
export default {
data () {
return {
myTitle: '标题'
}
},
metaInfo: {
title: Title,
titleTemplate: '%s - by vue-meta',
htmlAttrs: {
lang: 'zh'
},
script: [{innerHTML: 'console.log("hello hello!")', type: 'text/javascript'}],
__dangerouslyDisableSanitizers: ['script']
},
...
}
可以看⼀下页⾯显⽰
熟悉 Nuxt.js 的同学，会发现配置 meta info 的 keyName 不⼀致。可以通过下⾯的配置⽅法来修改：
// vue-meta configuration
Vue.use(Meta, {
keyName: 'head', // the component option name that vue-meta looks for meta info on.
attribute: 'data-n-head', // the attribute name vue-meta adds to the tags it observes
ssrAttribute: 'data-n-head-ssr', // the attribute name that lets vue-meta know that meta info has already been server-rendered
tagIDKeyName: 'hid' // the property name that vue-meta uses to determine whether to overwrite or append a tag
})
更加全⾯详细的api，可以参考
Server 服务端
Step 1. 将 $meta 对象注⼊到上下⽂中
server-entry.js:
import app from './app'
const router = app.$router
react router如何使用
const meta = app.$meta() // here
export default (context) => {
router.push(context.url)
return app
}
$meta 主要提供了，inject 和 refresh ⽅法。inject ⽅法，⽤在服务端，返回设置的metaInfo ；refresh ⽅法，⽤在客户端，作⽤是更新meta信息。
Step 2. 使⽤ inject() ⽅法输出页⾯
server.js:
<('*', (req, res) => {
const context = { url: req.url }
if (error) return res.send(error.stack)
const bodyOpt = { body: true }
const {
title, htmlAttrs, bodyAttrs, link, style, script, noscript, meta
} = a.inject()
return res.send(`
<!doctype html>
<html data-vue-meta-server-rendered ${()}>
<head>
${()}
${()}
${()}
${()}
${()}
${()}
</head>
<body ${()}>
${html}
<script src="/assets/vendor.bundle.js"></script>
<script src="/assets/client.bundle.js"></script>
${(bodyOpt)}
</body>
</html>
`)
})
})
源码分析
前⾯说了 vue-meta 的使⽤⽅法，或许⼤家会想这些功能是怎么实现的，那下⾯就和⼤家分享⼀下源码。
怎么区分 client 和 server渲染？
vue-meta 会在 beforeCreate() 钩⼦函数中，将组件中设置的 metaInfo ，放在 this.$metaInfo 中。我们可以在其他⽣命周期中，访问 this.$metaInfo 下的属性。
if (typeof this.$options[options.keyName] === 'function') {
if (typeof this.$optionsputed === 'undefined') {
this.$optionsputed = {}
}
this.$optionsputed.$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 ⽅法，会返回对应的信息。
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}>`
}
}
}
__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')
最后
最开始接触 vue-meta 是在 Nuxt.js 中。如果想了解 Nuxt.js，欢迎⼤家阅读和分享。⽂中有任何表述不清或不当的地⽅，欢迎⼤家批评指正。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。