每一个路由信息对象身上，都有一个 meta 属性，叫做路由元信息。

一、基础语法

1、设置路由元信息

在 router/index.js 路由配置文件中，每一个路由对象身上，都可以添加一个 meta 属性来设置路由元信息。

  1. const routes = [
  2.     {
  3.         // ... 路由基本配置
  4.         meta: {
  6.         }
  7.     }
  8. ]

2、获取路由元信息

  1. <h1>{{$route.meta}}</h1>
  1. export default {
  2.     created() {
  3.         console.log(this.$route.meta);
  4.     }
  5. }

二、应用场景

1、路由组件的缓存

可以通过一个自定义的属性，将组件是否需要缓存的状态记录在 meta 中：

  1. const routes = [
  2.     {
  3.         // ... 路由基本配置
  4.         meta: {
  5.             keepAlive: true
  6.         }
  7.     }
  8. ]
  1. // 根据该路由配置meta信息，控制该组件的内容是否需要缓存
  2. <router-view v-if="$route.meta.KeepAlive"></router-view>
  3. <keep-alive>
  4.   <router-view v-if="!$route.meta.KeepAlive"></router-view>
  5. </keep-alive>

2、面包屑

还可以将面包屑导航需要显示的文字内容设置在每一个路由的 meta 属性中：

  1. const routes = [
  2.     {
  3.         // ... 路由基本配置
  4.         meta: {
  5.             title: '学生管理',
  6.             subTitle: '学生列表'
  7.         }
  8.     }
  9. ]
  1. <p class="breadcrumb">首页 / {{$route.meta.title}} / {{$route.meta.subTitle}}</p>