在VueSPA应用中修改HTML头部标签的方法
这篇文章主要介绍在Vue SPA应用中修改HTML头部标签的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联-专业网站定制、快速模板网站建设、高性价比江海网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式江海网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖江海地区。费用合理售后完善，10余年实体公司更值得信赖。
在 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: '然后就可以在组件中使用了
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，可以参考vue-meta github
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(`
${meta.text()}
${title.text()}
${link.text()}
${style.text()}
${script.text()}
${noscript.text()}
${html}
${script.text(bodyOpt)}