如何使用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.jsimport 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%">
<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%">
<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框架中,它可以让我们控制网站中的元数据应该如何显示。
以上是 如何使用Vue-Meta在Vue中添加元数据 的全部内容, 来源链接: utcz.com/a/39699.html