使用vue-meta如何管理头部标签
这篇文章主要介绍了详解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-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
})更加全面详细的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(`
<!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踩坑分享。文中有任何表述不清或不当的地方，欢迎大家批评指正。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上是使用vue-meta如何管理头部标签的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
vue.js怎么引用js文件
Apr 07, 2025 pm 11:27 PM
在 Vue.js 中引用 JS 文件的方法有三种：直接使用 <script> 标签指定路径；利用 mounted() 生命周期钩子动态导入；通过 Vuex 状态管理库进行导入。
vue中的watch怎么用
Apr 07, 2025 pm 11:36 PM
Vue.js 中的 watch 选项允许开发者监听特定数据的变化。当数据发生变化时，watch 会触发一个回调函数，用于执行更新视图或其他任务。其配置选项包括 immediate，用于指定是否立即执行回调，以及 deep，用于指定是否递归监听对象或数组的更改。
vue中怎么用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。
vue懒加载什么意思
Apr 07, 2025 pm 11:54 PM
在 Vue.js 中，懒加载允许根据需要动态加载组件或资源，从而减少初始页面加载时间并提高性能。具体实现方法包括使用 <keep-alive> 和 <component is> 组件。需要注意的是，懒加载可能会导致 FOUC（闪屏）问题，并且应该仅对需要懒加载的组件使用，以避免不必要的性能开销。
vue怎么给按钮添加函数
Apr 08, 2025 am 08:51 AM
可以通过以下步骤为 Vue 按钮添加函数：将 HTML 模板中的按钮绑定到一个方法。在 Vue 实例中定义该方法并编写函数逻辑。
Vue 实现跑马灯/文字滚动效果
Apr 07, 2025 pm 10:51 PM
在 Vue 中实现跑马灯/文字滚动效果，可以使用 CSS 动画或第三方库。本文介绍了使用 CSS 动画的方法：创建滚动文本，用 <div> 包裹文本。定义 CSS 动画，设置 overflow: hidden、width 和 animation。定义关键帧，设置动画开始和结束时的 transform: translateX()。调整动画属性，如持续时间、滚动速度和方向。
怎样查询vue的版本
Apr 07, 2025 pm 11:24 PM
可以通过以下方法查询 Vue 版本：使用 Vue Devtools 在浏览器的控制台中查看“Vue”选项卡。使用 npm 运行“npm list -g vue”命令。在 package.json 文件的“dependencies”对象中查找 Vue 项。对于 Vue CLI 项目，运行“vue --version”命令。检查 HTML 文件中引用 Vue 文件的 <script> 标签中的版本信息。
vue返回上一页的方法
Apr 07, 2025 pm 11:30 PM
Vue.js 返回上一页有四种方法：$router.go(-1)$router.back()使用 <router-link to="/"> 组件window.history.back()，方法选择取决于场景。
