1，meta 数据配置

const router =  new Router({
  routes: [ //配置路由，使用数组形式
    {
      path: '/',   //链接路径
      name: 'index',  //路由名称
      component: index, //映射的组件
      meta: {
        title: '首页'
      }
    },
    {
      path: '/hello',
      name: 'hello',
      component: hello,
      meta: {
        title: '欢迎页'
      }
    }
  ]
})

2，在组件中获取 meta 数据 

（1）我们可以通过 $route.meta.xxxx 获取路由元信息中的数据，下面我们将其直接显示在页面上。

<template>
  <div>
    <h1>{{ $route.meta.title}}</h1>
  </div>
</template>

（2）运行结果如下：

3，在路由钩子中获取 meta 数据 

（1）在上文中我演示了当跳转到某个页面时，如何在这个页面组件内改变网页标题。还有种更方便的做法，那便是在全局的钩子函数 beforeEach 中获取 meta 中的 title 数据，并设置为页面标题。

//全局路由改变前钩子
router.beforeEach((to, from, next) => {
  window.document.title = to.meta.title;
  next();
})

（2）运行结果如下：

        

4，动态改变 meta 数据

this.$route.meta.title = "还是首页";