vue-meta
-
简介
vue-meta是HTML的元数据的管理工具
Nuxt.js内置的库vue-meta，管理Vue.js组件中的HTML元数据，可以解决SEO（搜索引擎优化）的问题
github -
元数据
meta标签用于设置HTML的元数据（描述数据的数据），该数据不会显示在页面中，主要用于浏览器（如和现实内容或重新加载页面）、搜索引擎（如SEO）及其他web服务
-
例子
// Component.vue { metaInfo: { meta: [ { hid: 'description', name: 'description', content: 'hello world' } ] } }以上代码会生成如下内容
<!-- Rendered HTML tags in your page --> <meta data-hid="description" name="description" content="hello world">注:metaInfo可以添加到任何或所有组件中，这些组件将自上而下自动合并
使用方式
Nuxt.js提供了3种不同添加元数据的方式
- 全局配置
nuxt.config.jsexport default { head: { title: 'my website title', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: 'my website description' } ], link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }] } } - 本地对象配置
使用head作为一个对象来设置标题和描述<script> export default { head: { title: 'Home page', meta: [ { hid: 'description', name: 'description', content: 'Home page description' } ], } } </script> - 本地函数配置
使用head作为一个函数来设置标题和描述。通过使用函数，可以访问数据和计算的属性<template> <h1>{{ title }}</h1> </template> <script> export default { data() { return { title: 'Home page' } }, head() { return { title: this.title, meta: [ { hid: 'description', name: 'description', content: 'Home page description' } ] } } } </script>
注:为了避免子组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象，建议利用 hid 键为meta标签配一个唯一的标识编号
