在 Vue SPA 应用中,如果想要修改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有以下特点:
如何使用
在介绍如何使用之前,先和大家普及一个最近很火的名词 服务端渲染(SSR,Server Side Render),简单来讲,就是在访问某个页面时,服务端会把渲染好的页面,直接返回给浏览器。
我们知道 vue-Meta 是支持SSR的,下面的介绍分成两部分:
Client 客户端
在入口文件中,install vue-Meta plugin
Vue.use(VueRouter)
Vue.use(VueMeta)
/ eslint-disable no-new /
new Vue({
el: '#app',router,template: '
})
然后就可以在组件中使用了
可以看一下页面显示
熟悉 Nuxt.js 的同学,会发现配置 meta info 的 keyName 不一致。可以通过下面的配置方法来修改:
更加全面详细的api,可以参考vue-meta github
Server 服务端
Step 1. 将 $Meta 对象注入到上下文中
server-entry.js:
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: