在进行前端开发中，我们通常需要设置页面的 meta 标签，以方便搜索引擎优化（SEO）和社交网络分享等功能。虽然手动编写 meta 标签并不困难，但如果页面众多，工作量就会逐渐增加。而 vue-meta 这个 npm 包则提供了一种更为高效的方式来设置页面的 meta 标签。
安装和引用
在项目中使用 vue-meta 需要先将其安装。可以通过 npm 进行安装：
npm install vue-meta --save
安装成功后，在 Vue 的入口文件中引用即可：
import Vue from 'vue'; import VueMeta from 'vue-meta'; Vue.use(VueMeta);
基本使用
使用 vue-meta 进行设置 meta 标签非常方便。首先，在组件中添加一个 metaInfo 对象，并在其中声明 meta 标签：
-- -------------------- ---- -------
------ ------- -
----- --------------
--------- -
------ --- ------- -----
----- -
- ----- -------------- -------- ----- -- -- ------- ---- -
-
--
-- ---
-在这个示例中，我们声明了一个 title 和一个 name 为 description 的 meta 标签。这些标签将会被自动插入到当前页面的 head 中。类似地，我们也可以声明其它的 meta 属性，如 keywords、author、og:title 等等。
动态设置 meta 属性
vue-meta 还支持在运行时动态设置 meta 属性。我们只需要在组件内部访问 $metaInfo 对象，就可以对组件的 metaInfo 对象进行修改：
-- -------------------- ---- -------
------ ------- -
----- -----------
------ -
------ -
----- -
------ --- ------- ---- ------
------- ----- -----
-------- ------ -------
-
--
--
--------- -
-------------------- - ----------------
-------------------------- --------- ----------- -------- --------------- ---
-------------------------- ----- --------- -------- ---------------- ---
-
--在这个示例中，我们动态更新了组件的 title、og:title 以及 author 属性。这种方式在需要根据组件数据动态修改 meta 标签时非常有用。
指定默认值
在开发中，我们经常需要实现一些默认的 meta 标签。例如，我们可能想在每个页面都包含一个相同的 title 和 description 标签。vue-meta 允许我们在根 Vue 实例中设置这些默认值：
const app = new Vue({
metaInfo: {
titleTemplate: '%s | My Awesome App',
meta: [
{ name: 'description', content: 'This is my awesome app' }
]
}
});在这里，我们为页面添加了一个 titleTemplate 和一个 name 为 description 的 meta 标签。这些标签将会被自动插入到每个组件的 metaInfo 对象中。如果某个组件内部没有声明 title 或 description 属性，则会使用根实例中的默认值。
总结
vue-meta 提供了一种非常方便的方式来设置页面的 meta 标签，它支持静态和动态的 meta 属性，以及默认值。在项目开发中，使用 vue-meta 可以大幅度提高我们编写和管理 meta 标签的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/58024