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

不念不忘少年蓝@ 2022-11-27 04:26 487阅读 0赞

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.

动态元数据已经[在此处][partially covered here]进行了[部分介绍][partially covered here] ，但是我们今天的目标是突出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

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之][Vue Router]类的路由解决方案，则可以在`router.js`文件中引导vue-meta ：

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.

如果使用[服务器端渲染][Server Side Rendering] ，则需要在挂载根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)][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][].

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

## 填充元数据 **(**Populating Metadata**)** ##

### 职称 **(**Titles**)** ###

vue-meta allows us to update the `<title>` tag on both parent and child components. In our root component we can define a default title that will appear if a child component lacks one. We can also define a `titleTemplate` which will be used to display the title from child components.

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

App.vue

应用程序

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

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

### 其他元数据 **(**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' }
        ]
      },
      ...
    }

<html reptilian="gator">
      <head nest="eggs">
        <title>Default App Title | vue-meta Example App</title>
        <meta charset="utf-8">
        <meta name="description" content="gator">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>
    </html>

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属性规范][metaInfo properties spec] ，以获取所有可用选项。

## 组件元数据层次结构 **(**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

应用程序

<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.vue

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

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

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

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

HelloWorld.vue

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

<title>
      Hello World!
    </title>

--------------------

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

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

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

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][official documentation 1] if you’d like to learn more about all the library has to offer.

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

> 翻译自: [https://www.digitalocean.com/community/tutorials/vuejs-vue-meta][https_www.digitalocean.com_community_tutorials_vuejs-vue-meta]

vue-meta-info

[partially covered here]: https://www.digitalocean.com/community/tutorials/vuejs-vue-router-modify-head
[Vue Router]: https://router.vuejs.org/
[Server Side Rendering]: https://www.digitalocean.com/community/tutorials/vuejs-server-side-rendering-with-nuxtjs
[NuxtJS]: https://nuxtjs.org/api/pages-head
[Gridsome]: https://gridsome.org/docs/head/
[Ream]: https://ream.js.org/guide/manipulating-head.html
[Vue-Storefront]: https://docs.vuestorefront.io/guide/basics/configuration.html#seo
[Factor]: https://factor.dev/guide/metainfo
[official documentation]: https://vue-meta.nuxtjs.org/api/#plugin-options
[metaInfo properties spec]: https://vue-meta.nuxtjs.org/api/#metainfo-properties
[official documentation 1]: https://vue-meta.nuxtjs.org/
[https_www.digitalocean.com_community_tutorials_vuejs-vue-meta]: https://www.digitalocean.com/community/tutorials/vuejs-vue-meta