详解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介绍
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有以下特点：
- 在组件内设置 metainfo，便可轻松实现头部标签的管理
- metainfo 的数据都是响应的，如果数据变化，头部信息会自动更新
- 支持 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: this.mytitle,
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
const meta = app.$meta() // here
export default (context) => {
router.push(context.url)
context.meta = meta // and here
return app
}
$meta 主要提供了，inject 和 refresh 方法。inject 方法，用在服务端，返回设置的metainfo ；refresh 方法，用在客户端，作用是更新meta信息。
step 2. 使用 inject() 方法 输出页面
server.js:
app.get('*', (req, res) => {
const context = { url: req.url }
renderer.rendertostring(context, (error, html) => {
if (error) return res.send(error.stack)
const bodyopt = { body: true }
const {
title, htmlattrs, bodyattrs, link, style, script, noscript, meta
} = context.meta.inject()
return res.send(`
<!doctype html>
<html data-vue-meta-server-rendered ${htmlattrs.text()}>
<head>
${meta.text()}
${title.text()}
${link.text()}
${style.text()}
${script.text()}
${noscript.text()}
</head>
<body ${bodyattrs.text()}>
${html}
<script src="/assets/vendor.bundle.js"></script>
<script src="/assets/client.bundle.js"></script>
${script.text(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.$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 方法，会返回对应的信息。
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，欢迎大家阅读nuxt.js实战 和 nuxt.js踩坑分享。文中有任何表述不清或不当的地方，欢迎大家批评指正。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。