vue 添加 meta

什么是vue-meta？ (What is vue-meta?)

“vue-meta” is a module that offers a Vue plugin which allows us to add metadata from component dynamically.

“ vue-meta ”是提供Vue插件的模块，该插件使我们能够动态添加组件中的元数据。

This means in projects where we have multiple routes and we want to update the meta tags for SEO dynamically based on the route currently rendered on the page, vue-meta will handle that for us while giving us control over the app metadata.

这意味着在项目中，我们有多条路线，并且我们要根据页面上当前呈现的路线动态更新SEO的元标记，vue-meta将为我们处理该问题，同时让我们可以控制应用程序元数据。

建立 (Setup)

First of all, we need to add vue-meta to our project and let Vue know that we want to use it as a plugin available to all components.

首先，我们需要将vue-meta添加到我们的项目中，并让Vue知道我们希望将其用作可用于所有组件的插件。

npm install vue-meta --save

Then, we add the vue-meta to our main js file.

然后，我们将vue-meta添加到我们的主要js文件中。

// main.js or index.js
import Vue from "vue";
import App from "./App.vue"; // main component
import Meta from "vue-meta";Vue.use(Meta);new Vue({
         
  render: h => h(App)
}).$mount("#app");

添加元数据 (Adding Metadata)

Now we look into an example of how to add metadata to our component.

现在，我们看一个如何将元数据添加到组件的示例。

As can be seen, we can do that by calling ‘metaInfo’ function and return an object as a value that will contain our metadata.

可以看出，我们可以通过调用“ metaInfo”函数并返回一个对象作为包含我们的元数据的值来做到这一点。

In addition, we can set the meta value dynamically based on some logic as we have access to it at a component level.

另外，我们可以根据某些逻辑动态设置元值，因为我们可以在组件级别访问它。

元数据类型 (Type of Metadata)

We can add more or less any type of metadata needed using ‘vue-meta’ plugin whether it is meta, title, link or script.

我们可以使用“ vue-meta”插件或多或少地添加所需的任何类型的元数据，无论它是元，标题，链接还是脚本。

In the following below we will see an example of how to add some of these metadata.

在下面的内容中，我们将看到有关如何添加其中一些元数据的示例。

In the above example, we can see how we added an external script to the body using vue-meta. In the case we wanted the script to be included in the head instead, we can do that by removing body flag.

在上面的示例中，我们可以看到如何使用vue-meta将外部脚本添加到主体。在我们希望脚本包含在头部的情况下，我们可以通过删除body标志来实现。

Vmid (Vmid)

So far, we looked into how to setup vue-meta and add metadata to our component dynamically, however, what if we wanted to set the value to the specific property in multiple components and how that would be resolved.

到目前为止，我们研究了如何设置vue-meta以及如何将元数据动态添加到我们的组件中，但是，如果我们想将值设置为多个组件中的特定属性，该如何解决？

In order to do that, we can use vmid which is a special property that vue-meta provide us in order to resolve the value within the component tree. So if two sets of meta have the same vmid it will override it, using the value from the last updated component (i.e. child component) instead of merging it.

为了做到这一点，我们可以使用vmid ，这是vue-meta提供给我们的特殊属性，以便解析组件树中的值。因此，如果两组meta具有相同的vmid，它将使用最后更新的组件(即子组件)中的值而不是将其合并来覆盖它。

结论 (Conclusion)

In conclusion, vue-meta is a plugin that in most vue frameworks will come out of the box which allows us and give us the control to how the metadata should show in a website.

总之，vue-meta是一个插件，在大多数vue框架中都是现成的，它使我们能够控制元数据在网站中的显示方式。

翻译自: https://levelup.gitconnected.com/how-to-add-metadata-in-vue-using-vue-meta-55c593f4bbf5