详解vue-meta如何让你更优雅的管理头部标签

Vue 2019-01-07

在 Vue SPA 应用中，如果想要修改HTML的头部标签，或许，你会在代码里，直接这么做:

rush:js;"> // 改下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-meta github 上的介绍，基于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

rush:js;"> 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: '',components: { App }
})

然后就可以在组件中使用了

可以看一下页面显示

熟悉 Nuxt.js 的同学，会发现配置 meta info 的 keyName 不一致。可以通过下面的配置方法来修改：

更加全面详细的api，可以参考vue-meta github

Server 服务端

Step 1. 将 $Meta 对象注入到上下文中

server-entry.js:

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:

{ 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(` ${Meta.text()} ${title.text()} ${link.text()} ${style.text()} ${script.text()} ${noscript.text()} ${html}