介绍一个为Vue.js设计的简单且类型友好的元标签管理工具，名为vue-simple-headful。这个工具是vue-headful的改进版，提供更简单和多样化的头部交互。它支持动态属性并可作为原有vue-headful的替代品。
vue.js ts
虚假简单头 (vue-simple-headful)
This is a direct and fully reworked fork of vue-headful. It is meant to make headful interactions simpler and more diverse for Vue.js. It can be used as a replacement for original vue-headful if more simplicity or richer functionality needed.
这是vue-headful的直接且经过完全重做的分支。 它旨在使Vue.js的头部交互更加简单和多样化。 如果需要更多的简单性或更丰富的功能，它可以代替原始的vue-headful。
vue-simple-headful is a tiny wrapper around Headful, a generic library to set meta tags with JavaScript.
vue-simple-headful是Headful的一个小包装，Headful是用于使用JavaScript设置元标记的通用库。
npm i -S vue-simple-headful yarn add vue-simple-headful用法 (Usage)
注册插件 (Register the plugin)
import Vue from 'vue';
import vueHeadful from 'vue-simple-headful';
Vue.use(vueHeadful);
new Vue({
// your configuration
});And then use the headful component option in any of your views.
然后在任何视图中使用 headful component选项。
插件选项 (Plugin options)
Optinally you can define custom opions for a plugin:
您可以为插件定义自定义选项。
1.与组件的选项一起使用的自定义键： (1. A custom key to use with your components' options:)
Vue.use(vueHeadful, {
key: 'myMetaTags' // custom key for component option
})and then in some component.vue:
然后在某些component.vue ：
export default {
myMetaTags: {
title: 'Yay, a title in my custom option!'
}
}2.如果要使用特殊的vue组件，则为布尔型标志(默认为false)： (2. A boolean flag if you want to use a special vue-component (false by default):)
Vue.use(vueHeadful, {
// key: 'myMetaTags', // custom key for component option (optional)
component: true
})then in any template:
然后在任何模板中：
<template>
<!-- or <vue-my-meta-tags> if using custom key "myMetaTags" -->
<vue-headful
title=""
description=""
keywords=""
image=""
lang=""
ogLocale=""
url=""
/>
</template>简单的速记 (Headful shorthand)
The plugin also adds a shorthand for headful in every vue instance as $headful (or as $[your custom key]).
该插件还在每个vue实例中为headful添加了一个简写为$headful (或作为$[your custom key] )。
methods: {
someMethod() {
this.$headful({ /* your headful tags here */ });
// or, with the custom key:
// this.$myMetaTags({ /* your headful tags here */ });
}
}插件使用 (Plugin Usage)
作为功能 (As function)
export default {
// Supports Vue component's `this` context through an argument
headful(vm) {
return {
title: 'some title',
description: 'yay, a static description'
}
}
}作为箭头功能 (As arrow function)
export default {
headful: vm => ({
// Supports Vue component's `this` context through an argument
title: 'some title of ' + vm.someString,
description: 'yay, a static description'
}),
data() {
return {
someString: 'string'
}
}
}作为组件数据 (As component data)
export default {
data() {
return {
someString: 'string',
headful: {
title: 'title',
description: 'yay, a static description'
}
}
}
}作为对象 (As an object)
export default {
headful: {
title: 'some title',
description: 'yay, a static description'
}
}组件用法 (Component Usage)
vue-headful component supports all the head properties that are supported by Headful. You can find a non-complete list of head properties in the following example:
vue-headful组件支持Headful支持的所有head属性 。 在以下示例中，您可以找到头部属性的不完整列表：
<vue-headful
title=""
description=""
keywords=""
image=""
lang=""
ogLocale=""
url=""
/>If there are any other head properties or attributes you want to set, you can use html (for arbitrary elements in the whole document) or head (for elements within <head>) as follows. The selectors can be any valid CSS selector.
如果要设置其他任何head属性或属性，则可以按如下方式使用html (对于整个文档中的任意元素)或head (对于<head>元素)。 选择器可以是任何有效CSS选择器。
<vue-headful
:html="{
body: {id: 'aPageId'},
h1: {'data-foo': 'bar'},
}"
:head="{
'meta[charset]': {charset: 'utf-8'},
}"
/>
<!-- Results in:
<head>
<meta charset="utf-8">
</head>
<body id="aPageId">
<h1 data-foo="bar"></h1>
-->If you want to remove a previously defined attribute from an element, you can set it to undefined as in the example below:
如果要从element中删除先前定义的属性 ，可以将其设置为undefined ，如下例所示：
<vue-headful :title="undefined"/>描述 (Description)
vue-simple-headful is only a wrapper around Headful and by itself does not do that much.
VUE-简单headful大约只有一个包装Headful和本身没有做那么多。
vue-simple-headful supports all the head properties that are supported by Headful. You can find a non-complete list of head properties in the following example: JS:
vue-simple-headful支持Headful支持的所有head属性 。 在以下示例中，您可以找到头部属性的不完整列表： JS ：
headful: {
title: ""
description: ""
keywords: ""
image: ""
lang: ""
ogLocale: ""
url: ""
}HTML
HTML
<vue-headful
title=""
description=""
keywords=""
image=""
lang=""
ogLocale=""
url=""
/>If there are any other head properties or attributes you want to set, you can use html (for arbitrary elements in the whole document) or head (for elements within <head>) as follows. The selectors can be any valid CSS selector.
如果要设置其他任何head属性或属性，则可以按如下方式使用html (对于整个文档中的任意元素)或head (对于<head>元素)。 选择器可以是任何有效CSS选择器。
JS:
JS ：
headful: {
html: {
body: { id: 'aPageId' },
h1: { 'data-foo': 'bar' },
},
head: {
'meta[charset]': { charset: 'utf-8' },
}
}HTML:
HTML ：
<vue-headful
:html="{
body: {id: 'aPageId'},
h1: {'data-foo': 'bar'},
}"
:head="{
'meta[charset]': {charset: 'utf-8'},
}"
/><!-- Results in: -->
<head>
<meta charset="utf-8">
</head>
<body id="aPageId">
<h1 data-foo="bar"></h1>If you want to remove a previously defined property, you can set it to undefined as in the example below:
如果要删除先前定义的属性 ，可以将其设置为undefined ，如下例所示：
JS:
JS ：
headful:{
title: undefined
}HTML:
HTML ：
<vue-headful :title="undefined"/>/* Results in:
<title></title>
<meta itemprop="name">
<meta property="og:title">
<meta name="twitter:title">
*/IMPORTANT
重要
Note that neither Headful nor vue-headful add missing HTML elements, they only add attribute values. So it is important that you add everything that you want to have populated in your HTML first. For example, to specify the title and description you have to prepare the HTML as follows.
请注意，Headful和vue-headful都不添加缺少HTML元素，它们仅添加属性值。 因此，重要的是首先添加要填充到HTML中的所有内容。 例如，要指定标题和描述，您必须按如下方式准备HTML。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta itemprop="name">
<meta property="og:title">
<meta name="twitter:title">
<meta name="description"/>
<meta itemprop="description">
<meta property="og:description">
<meta name="twitter:description">
</head>
<body>
<!-- ... -->
</body>
</html>vue-headful also supports dynamic properties and adds watchers to everything. That means you can also set head properties asynchronously, for example after an API request.
vue-headful还支持动态属性，并将监视程序添加到所有内容。 这意味着您也可以异步设置头部属性，例如在API请求之后。
<script>
export default {
headful() {
return {
title: 'Dynamic title',
};
},
mounted() {
// dummy async operation to show watcher on properties
setTimeout(() => {
this.headful.title = 'Dynamic async title';
}, 3000);
},
};
</script>Also see the non-complete list of meta tags and other head properties you can define using vue-headful:
另请参阅元标记的不完整列表以及可以使用vue-headful定义的其他head属性：
<html lang><html lang><title><title><meta name="description"><meta name="description"><meta itemprop="description"><meta itemprop="description"><meta property="og:description"><meta property="og:description"><meta name="twitter:description"><meta name="twitter:description"><meta name="keywords"><meta name="keywords"><meta itemprop="image"><meta itemprop="image"><meta property="og:image"><meta property="og:image"><meta name="twitter:image"><meta name="twitter:image"><meta property="og:locale"><meta property="og:locale"><link rel="canonical"><link rel="canonical"><meta property="og:url"><meta property="og:url"><meta name="twitter:url"><meta name="twitter:url">
翻译自: https://vuejsexamples.com/a-simple-ts-friendly-meta-tag-manager-for-vue-js/
vue.js ts
扫一扫
1837
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
