如何使用 vue-meta 更改 Vue.js 中的元数据

介绍

该vue-meta库提供了一个 Vue 插件，允许您从组件级别控制应用程序的元数据。

为搜索引擎优化 (SEO) 管理 Web 应用程序的元数据很重要，但是在使用单页 Web 应用程序 (SPA) 时，这通常是一项繁琐的任务。本vue-router教程中已经部分介绍了动态元数据。

在本文中，您将探索该vue-meta插件如何以简洁、合乎逻辑的方式为您处理此问题，同时为您提供对应用程序元数据的更多控制。

先决条件

如果你想跟随这篇文章，你需要：

本教程已通过 Node v15.8.0、npmv7.5.4、Vue v12.6.11 和vue-metav2.4.0 验证。

使用 vue-meta

首先，要使用vue-meta，请打开您的终端并导航到您现有的 Vue 项目目录。然后，运行以下命令：

  • npm install vue-meta@2.4.0

接下来，使用您的代码编辑器，打开main.js文件并引导插件：

源代码/main.js
import Vue from 'vue'
import VueMeta from 'vue-meta'
import App from 'App.vue'

Vue.use(VueMeta)

new Vue({
  render: h => h(App),
}).$mount('#app')

保存您的更改，然后vue-meta将可用于您的应用程序。

与 Vue Router 集成

如果您正在使用类似的路由解决方案vue-router，那么您可以vue-meta在您的router/index.js文件中引导：

src/路由器/index.js
import Vue from 'vue'
import Router from 'vue-router'
import VueMeta from 'vue-meta'

Vue.use(Router)
Vue.use(VueMeta)

export default new Router({})

保存更改，然后vue-meta和vue-router将提供给您的应用程序。

与服务器端渲染集成

如果您正在使用服务器端渲染 (SSR)，您将需要vue-meta在Vue安装根实例之前在服务器和客户端上运行的文件中进行引导。

与 Vue 框架集成

如果您使用的框架已经使用了vue-meta，例如NuxtJS，则不需要引导。相反，您应该参考所选框架的文档。

其他已经使用的框架vue-meta包括Gridsome、Ream、Vue-Storefront和Factor JS。

自定义插件选项

vue-meta提供自定义插件行为的选项。NuxtJS通过将“ metaInfo”属性的名称更改为“ ”来利用这一点head。

您可以通过vue-meta使用以下命令进行引导来复制它keyName：

源代码/main.js
import Vue from 'vue'
import VueMeta from 'vue-meta'
import App from 'App.vue'

Vue.use(VueMeta, {
  keyName: 'head'
})

new Vue({
  el: '#app',
  render: h => h(App)
})

请务必查看官方文档中可用选项的完整列表。

填充元数据

vue-meta允许您更新<title>父组件和子组件上的标记。在您的根组件中，您可以定义一个默认标题，如果子组件缺少该标题，该标题将出现。您还可以定义一个titleTemplate用于显示子组件的标题。

源代码/App.vue
export default {
  name: 'App',
  metaInfo: {
    title: 'Default App Title',
    titleTemplate: '%s | vue-meta Example App'
  },
  // ...
}

这titleTemplate将产生以下内容<title>：

Output
<title>
  Default App Title | vue-meta Example App
</title>

通常，您希望包括其他信息传递到浏览器或网络爬虫等页面的charset，description或viewport。您甚至可以向页面html和head标签添加属性。并且还注入外部脚本。

源代码/App.vue
export default {
  name: 'App',
  metaInfo: {
    title: 'Default App Title',
    titleTemplate: '%s | vue-meta Example App',
    htmlAttrs: {
      lang: 'en-US'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'description', content: 'An example Vue application with vue-meta.' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ]
  },
  // ...
}

此代码将生成以下输出：

Output
<html lang="en-US">
  <head>
    <title>Default App Title | vue-meta Example App</title>
    <meta charset="utf-8">
    <meta name="description" content="'An example Vue application with vue-meta.">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
</html>

请务必查看API 文档的metaInfo属性规范以vue-meta了解所有可用选项。

了解metaInfo父组件和子组件的行为

子组件将递归地将元数据与其父组件合并。这允许我们根据当前安装的组件更新页面的元数据。

该App组件是一个父组件，title并titleTemplate定义了：

源代码/App.vue
<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  metaInfo: {
    title: 'Default App Title',
    titleTemplate: '%s | vue-meta Example App'
  },
  components: {
    HelloWorld
  }
}
</script>

该HelloWorld组件是App具有title定义的组件的子组件：

src/components/HelloWorld.vue
<template>
  <div>Hello World!</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  metaInfo: {
    title: 'Hello World!'
  }
}
</script>

此代码将生成以下输出：

Output
<title>
  Hello World! | vue-meta Example App
</title>

子组件的title覆盖父组件的title.

您还可以titleTemplate像这样禁用来自子组件的 ：

src/components/HelloWorld.vue
export default {
  name: 'HelloWorld',
  metaInfo: {
    title: 'Hello World!',
    titleTemplate: null
  }
}

此代码将生成以下输出：

Output
<title>
  Hello World!
</title>

如果安装了两个子组件并且都包含metaInfo，则最后一个要安装的子组件将用于填充页面的元数据。

假设您创建了第二个名为 的子组件HelloWorld2。App像前面的例子一样修改组件，如下所示：

源代码/App.vue
<template>
  <div>
    <HelloWorld />
    <HelloWorld2 />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import HelloWorld2 from './components/HelloWorld2.vue'

export default {
  name: 'App',
  metaInfo: {
    title: 'Default App Title',
    titleTemplate: '%s | vue-meta Example App'
  },
  components: {
    HelloWorld,
    HelloWorld2
  }
}
</script>

该HelloWorld2组件是一个子组件App与组件title定义的-从不同title的定义HelloWorld组件：

src/components/HelloWorld2.vue
<template>
  <div>Hello World 2!</div>
</template>

<script>
export default {
  name: 'HelloWorld2',
  metaInfo: {
    title: 'Hello World 2!'
  }
}
</script>

此代码将生成以下输出：

Output
<title>
  Hello World 2! | vue-meta Example App
</title>

使用多个 Vue 实例vue-meta将导致仅更新最后一个应用程序的元数据！

只有重复的元数据才会被子组件覆盖。其他元数据将被连接。

强制执行独特的metaInfo行为vmid

vue-meta允许您分配一个称为vmid您的特殊属性，metaInfo以便您可以控制它如何与您的组件树解析。

如果两组元数据具有相同的vmid，例如父项和子项，它们将不会合并，而是子项将覆盖父项。

这是一个带有vmid“描述”和content“父描述”的父组件的示例：

Parent Component
{
  metaInfo: {
    meta: [
      { charset: 'utf-8' },
      {
        vmid: 'description',
        name: 'description',
        content: 'Parent description.'
      }
    ]
  }
}

这是一个具有相同vmid“描述”和不同content“子描述”的子组件的示例：

Child Component
{
  metaInfo: {
    meta: [
      {
        vmid: 'description',
        name: 'description',
        content: 'Child description.'
      }
    ]
  }
}

此代码将生成以下输出：

Output
<meta charset="utf-8">
<meta data-vmid="description" name="description" content="Child description.">

如果子组件vmid与父组件共享 a并且metaInfo属性设置为null，则该属性将从父组件中删除。

如果子组件返回undefined某个metaInfo属性，vue-meta则将回退到父组件的属性。

结论

vue-meta 如果您希望控制和动态更新应用程序的元数据，这是一个很好的解决方案。

如果您想了解有关该库提供的所有内容的更多信息，请务必查看官方文档。

如果您想了解有关 Vue.js 的更多信息，请查看我们的 Vue.js 主题页面以获取练习和编程项目。

觉得文章有用？

点个广告表达一下你的爱意吧 ！😁