如何使用Vue-Meta在Vue中添加元数据

在这篇文章中，咱们将探讨如何在咱们的项目中添加vue-meta，并使用它来处理组件中的元数据。

什么是vue-meta

“vue-meta 是提供Vue插件的模块，该插件使咱们可以动态添加组件中的元数据。

这意味着在咱们有多条路由的项目中，若是咱们想根据当前页面上呈现的路由动态更新SEO的元标签，vue-meta将为咱们处理，同时让咱们控制应用元数据。

Setup

首先，咱们须要将vue-meta添加到咱们的项目中，并让Vue知道咱们想将其用做可用于全部组件的插件。

npm install vue-meta --save

而后，将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");

添加元数据

如今，咱们来看一个如何将元数据添加到组件的示例。

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <HelloWorld msg="Hello Vue in CodeSandbox!"/>
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
  name: "App",
  components: {
    HelloWorld
  },
  metaInfo() {
    return {
      title: "test meta data with vue",
      meta: [
        {
          vmid: "description",
          name: "description",
          content:
            "hello world, this is an example of adding a description with vueMeta"
        }
      ]
    };
  }
};
</script>

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

另外，咱们能够根据某些逻辑动态设置元值，由于咱们能够在组件级别访问它。

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <HelloWorld msg="Hello Vue in CodeSandbox!"/>
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
  name: "App",
  components: {
    HelloWorld
  },
  metaInfo() {
    const a = "test";
    return {
      title: "test meta data with vue",
      meta: [
        ...(a === "test" && [
          {
            vmid: "description",
            name: "description",
            content:
              "hello world, this is an example of adding a description with vue-meta"
          }
        ])
      ]
    };
  }
};
</script>

元数据类型

咱们可使用“vue-meta”插件或多或少地添加所需的任何类型的元数据，不管它是meta，title，link仍是script。

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

<script>
import HelloWorld from "./components/HelloWorld";
export default {
  name: "App",
  components: {
    HelloWorld
  },
  metaInfo() {
    const a = "test";
    return {
      title: "test meta data with vue",
      meta: [
        ...(a === "test" && [
          {
            vmid: "description",
            name: "description",
            content:
              "hello world, this is an example of adding a description with vue-meta"
          }
        ])
      ],
            script: [
        { src: '<https://services.postcodeanywhere.co.uk/js/address-3.91.js>', async: true, defer: true, body: true }
      ],
            link: [
        {
          rel: 'canonical',
          href: '<https://malikgabroun.com/>'
        }
            ]
    };
  }
};
</script>

在上面的示例中，咱们能够看到如何使用vue-meta将外部脚本添加到主体。在咱们但愿脚本包含在头部的状况下，咱们能够经过删除body标志来实现。

Vmid

到目前为止，咱们研究了如何设置vue-meta，并将元数据动态地添加到咱们的组件中，然而，若是咱们想在多个组件中设置特定属性的值，这将如何解决。

为了作到这一点，咱们可使用vmid，它是vue-meta提供给咱们的一个特殊属性，以便在组件树中解析该值。所以，若是两组元具备相同的vmid，它将覆盖它，使用最后更新的组件（即子组件）的值，而不是合并它。

总结

总而言之，vue-meta是一个插件，在大多数vue框架中，它可让咱们控制网站中的元数据应该如何显示。