vue-meta-info_使用vue-meta在Vue中处理元数据

vue-meta-info

The vue-meta library provides a Vue plugin that allows us to take control of our app’s metadata from a component level. It’s important to curate the metadata of our web apps for SEO, but when working with single-page web applications (SPAs) this can often be a cumbersome task.

vue-meta库提供了一个Vue插件，使我们可以从组件级别控制应用程序的元数据。 整理用于SEO的Web应用程序的元数据非常重要，但是在处理单页Web应用程序(SPA)时，这通常是一项繁琐的任务。

Dynamic metadata was already partially covered here, but our goal today is to highlight how the vue-meta plugin handles this for us in a concise, logical way while providing us with even more control over our app’s metadata.

动态元数据已经在此处进行了部分介绍 ，但是我们今天的目标是突出vue-meta插件如何以简洁，逻辑的方式为我们处理此问题，同时为我们提供对应用程序元数据的更多控制。

建立 (Setup)

Since vue-meta is a plugin we’ll need to add the package to our project dependencies. We’ll also need to let Vue know we want to use the vue-meta plugin.

由于vue-meta是一个插件，我们需要将包添加到我们的项目依赖项中。 我们还需要让Vue知道我们要使用vue-meta插件。

安装 (Installation)

Install vue-meta with your preferred package manager:

使用首选软件包管理器安装vue-meta ：

# Yarn
$ yarn add vue-meta
# NPM
$ npm install vue-meta --save

引导程序 (Bootstrap)

Bootstrap the vue-meta plugin in your main JavaScript file:

在main JavaScript文件中引导vue-meta插件：

main.js

main.js

import Vue from 'vue';
import VueMeta from 'vue-meta';

import App from 'App.vue';

Vue.use(VueMeta);

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

If you’re using a routing solution like Vue Router, then you could bootstrap vue-meta in your router.js file:

如果您使用的是Vue Router之类的路由解决方案，则可以在router.js文件中引导vue-meta ：

router.js

router.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({})

固态继电器 (SSR)

If you’re using Server Side Rendering you’ll want to bootstrap vue-meta in a file that runs on both the server and the client before the root Vue instance is mounted.

如果使用服务器端渲染 ，则需要在挂载根Vue实例之前将vue-meta引导到同时在服务器和客户端上运行的文件中。

Vue框架 (Vue Frameworks)

If you’re using a framework that already uses vue-meta, such as NuxtJS, you won’t need to bootstrap. Instead, you should refer to the documentation for your chosen framework. Other frameworks that already use vue-meta include Gridsome, Ream, Vue-Storefront, and Factor.

如果您使用的是已经使用vue-meta的框架(例如NuxtJS) ，则无需进行引导。 相反，您应该参考所选框架的文档。 已经使用vue-meta的其他框架包括Gridsome ， Ream ， Vue-Storefront和Factor 。

插件选项 (Plugin Options)

vue-meta provides options to customize the plugin’s behavior. NuxtJS takes advantage of this by changing the name of the metaInfo property to head. You could do this by bootstrapping vue-meta like so:

vue-meta提供了用于自定义插件行为的选项。 NuxtJS通过更改名称利用了这个metaInfo属性head 。 您可以这样引导vue-meta来做到这一点：

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)
});

Make sure to check out the full list of options available in the official documentation.

确保检查出官方文档中可用选项的完整列表。

填充元数据 (Populating Metadata)

职称 (Titles)

vue-meta allows us to update the

其他元数据 (Other Metadata)

Of course, title isn’t the only thing we care about when populating a page’s metadata. Often we want to include other information to pass to the browser or web crawler such as a page’s charset, description, or viewport. You can even add attributes to the page’s html or head tags and inject external scripts.

当然，填充页面的元数据时， title并不是我们唯一关心的事情。 通常，我们希望包含其他信息以传递给浏览器或Web爬网程序，例如页面的charset ， description或viewport 。 您甚至可以将属性添加到页面的html或head标签中，并插入外部脚本。

export default {
  name: 'App',
  metaInfo: {
    title: 'Default App Title',
    titleTemplate: '%s | vue-meta Example App',
    htmlAttrs: {
      reptilian: 'gator'
    },
    headAttrs: {
      nest: 'eggs'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'description', content: 'gator' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ]
  },
  ...
}

Make sure to check out the metaInfo properties spec of the vue-meta API documentation for all of the options available.

确保查看vue-meta API文档的metaInfo属性规范 ，以获取所有可用选项。

组件元数据层次结构 (Component Metadata Hierarchy)

Child components will recursively merge metadata with their parents. This allows us to update the page’s metadata based on which components are currently mounted.

子组件将与父组件递归合并元数据。 这使我们可以根据当前安装的组件来更新页面的元数据。

App.vue

应用程序

HelloWorld.vue

HelloWorld.vue

You could also disable the titleTemplate from a child component like so:

您还可以从子组件中禁用titleTemplate ，如下所示：

HelloWorld.vue

HelloWorld.vue

export default {
  name: 'HelloWorld',
  metaInfo: {
    title: 'Hello World!',
    titleTemplate: null
  }
}

---

---

If two child components are mounted and both contain metaInfo, the last child to be mounted will be used to populate the page’s metadata. Suppose we created a second child component called HelloWorld2 and modified our example as below:

如果安装了两个子组件，并且两个子组件都包含metaInfo ，则将使用要安装的最后一个子组件来填充页面的元数据。 假设我们创建了另一个名为HelloWorld2子组件，并修改了示例，如下所示：

Template: App.vue

模板：App.vue

Script: App.vue

脚本：App.vue

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
  }
}

HelloWorld2.vue

HelloWorld2.vue

Only duplicate metadata will be overwritten by child components. Other metadata will be concatenated.

只有重复的元数据将被子组件覆盖。 其他元数据将被串联。

Using multiple Vue instances with vue-meta will result in only the metadata from the last app to be updated!

将多个Vue实例与vue-meta一起使用将仅更新来自上一个应用程序的元数据！

虚拟机ID (VMID)

vue-meta allows us to assign a special property called vmid to our metaInfo so that we can control how it resolves with our component tree. If two sets of metadata have the same vmid, such as a parent and child, they will not merge but instead the child will override the parent like so:

vue-meta允许我们为metaInfo分配一个名为vmid的特殊属性，以便我们可以使用组件树控制其解析方式。 如果两组元数据具有相同的vmid ，例如父级和子级，则它们不会合并，但子级将覆盖父级，如下所示：

// parent component
{
  metaInfo: {
    meta: [
      { charset: 'utf-8' },
      { vmid: 'description', name: 'description', content: 'reptilian' }
    ]
  }
}
// child component
{
  metaInfo: {
    meta: [
      { vmid: 'description', name: 'description', content: 'gator' }
    ]
  }
}

删除子级的父级属性 (Remove parent property in child)

If a child component shares a vmid with a parent and a metaInfo property is set to null, this property will be removed from the parent.

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

儿童的有条件财产 (Conditional property in child)

If a child component returns undefined for a metaInfo property vue-meta will fall back to the parent’s property.

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

结语 (Wrapping Up)

vue-meta is a great solution if you’re looking to take control of and dynamically update your app’s metadata. It’s no question why so many popular Vue frameworks include the library out of the box. Make sure to take a look at the official documentation if you’d like to learn more about all the library has to offer.

如果您希望控制和动态更新应用程序的元数据，那么vue-meta是一个很好的解决方案。 毫无疑问，为什么这么多流行的Vue框架包括现成的库。 如果您想了解有关所有图书馆所提供的更多信息，请务必查看官方文档 。

翻译自: https://www.digitalocean.com/community/tutorials/vuejs-vue-meta

vue-meta-info