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

日期：2020-05-11 栏目：程序人生浏览：次

在 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-meta github 上的介绍，基于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
})

转载注明出处：http://www.heiqu.com/233.html

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

相关推荐