vue-router定义元信息meta操作

vue-router是Vue.js官方的路由管理库，它可以帮助我们快速开发单页应用程序。在应用程序中，通常会有很多的页面，而有时候需要为这些页面增加一些标识，例如页面标题、页面关键字、页面描述等等。这些标识可以让搜索引擎更好地索引网站内容，也可以让用户更好地理解页面。

为此，vue-router提供了定义元信息meta的操作。元信息指我们在head标签中添加的一些标签，例如，这些标签可以告诉搜索引擎和浏览器关于页面的信息。

下面是使用vue-router定义元信息meta的完整攻略：

1. 在router/index.js中定义路由

在router/index.js中定义路由时，我们可以给每个路由定义meta属性。meta属性可以是一个对象，也可以是一个返回对象的函数。

示例代码：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: '首页',
      keywords: 'Vue.js, SPA, 单页应用程序',
      description: '这是一个Vue.js单页应用程序的首页',
    },
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta() {
      return {
        title: '关于',
        keywords: 'Vue.js, SPA, 单页应用程序, 关于我们',
        description: '这是一个关于我们的页面',
      };
    },
  },
  // ...
];

在这个示例代码中，我们定义了两个路由，分别是首页（path为'/'）和关于（path为'/about'）。我们为每个路由定义了meta属性，并在meta属性中添加了title、keywords和description的元信息。

1. 在组件中使用元信息

虽然我们已经为每个路由定义了元信息，但这些元信息并没有自动添加到head标签中。因此，我们需要在对应的组件中手动添加元信息。

示例代码：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  name: "About",
  metaInfo() {
    return {
      title: this.$route.meta.title,
      meta: [
        {
          name: "keywords",
          content: this.$route.meta.keywords
        },
        {
          name: "description",
          content: this.$route.meta.description
        }
      ]
    };
  },
};
</script>

在这个示例代码中，我们在About组件中定义了一个metaInfo属性。这个属性返回一个对象，其中包含了我们在路由定义中设置的元信息，例如title、keywords和description。我们可以在template中使用这些元信息来显示标题和描述。

需要注意的是，我们还在metaInfo属性中定义了一个meta属性，这个属性用来描述页面的元信息。在这个属性中，我们定义了一个name为"keywords"的元信息和一个name为"description"的元信息。这些元信息将被添加到head标签中，同时告诉搜索引擎和浏览器有关此页面的信息。

通过上述两个步骤，我们就可以使用vue-router来定义元信息meta了。当进入某个路由时，vue-router会自动设置该路由的meta属性，然后我们在对应的组件中通过metaInfo属性来手动添加元信息。这样我们就可以轻松地为每个页面定义相关的元信息了。