vue-meta-info_使用vue-meta在Vue中处理元数据

vue-meta-info

The vue-meta library provides a Vue plugin that allows us to take control of our app’s metadata from a component level. It’s important to curate the metadata of our web apps for SEO, but when working with single-page web applications (SPAs) this can often be a cumbersome task.

vue-meta库提供了一个Vue插件，使我们可以从组件级别控制应用程序的元数据。 整理用于SEO的Web应用程序的元数据非常重要，但是在处理单页Web应用程序(SPA)时，这通常是一项繁琐的任务。

Dynamic metadata was already partially covered here, but our goal today is to highlight how the vue-meta plugin handles this for us in a concise, logical way while providing us with even more control over our app’s metadata.

动态元数据已经在此处进行了部分介绍 ，但是我们今天的目标是突出vue-meta插件如何以简洁，逻辑的方式为我们处理此问题，同时为我们提供对应用程序元数据的更多控制。

建立 (Setup)

Since vue-meta is a plugin we’ll need to add the package to our project dependencies. We’ll also need to let Vue know we want to use the vue-meta plugin.

由于vue-meta是一个插件，我们需要将包添加到我们的项目依赖项中。 我们还需要让Vue知道我们要使用vue-meta插件。

安装 (Installation)

Install vue-meta with your preferred package manager:

使用首选软件包管理器安装vue-meta ：

# Yarn
$ yarn add vue-meta
# NPM
$ npm install vue-meta --save

引导程序 (Bootstrap)

Bootstrap the vue-meta plugin in your main JavaScript file:

在main JavaScript文件中引导vue-meta插件：

main.js

main.js

import Vue from 'vue';
import VueMeta from 'vue-meta';

import App from 'App.vue';

Vue.use(VueMeta);

new Vue({
  el: '#app',
  render: h => h(App)
});

If you’re using a routing solution like Vue Router, then you could bootstrap vue-meta in your router.js file:

如果您使用的是Vue Router之类的路由解决方案，则可以在router.js文件中引导vue-meta ：

router.js

router.js

import Vue from 'vue';
import Router from 'vue-router';
import VueMeta from 'vue-meta';

Vue.use(Router);
Vue.use(VueMeta);

export default new Router({})

固态继电器 (SSR)

If you’re using