在这篇文章中，咱们将探讨如何在咱们的我的项目中增加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.jsimport Vue from "vue";import App from "./App.vue"; // main componentimport 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框架中，它能够让咱们管制网站中的元数据应该如何显示。