vue-router 动态的改变title的值

最近在开发手机端项目的时候，需要对页面的titel进行动态的配置。主要是采用路由守卫的方法进行动态的改变，具体方法如下：

1.meta 数据配置

将每个页面的 title 都写router中的 meta 中来统一维护。

// router.js文件
 {
      path: '/waybillHistory',
      name: 'waybillHistory',
      meta: {
        title: '历史记录'
      },
      component: () => import('./views/waybill/waybillHistory/waybillHistory')
    }

2.全局守卫动态改变

// router.js文件
// 全局路由守卫，动态改变tille
router.beforeEach((to, from, next) => {
  window.document.title = to.meta.title || '默认'
  next()
})

3.如果需要在页面中获取title参数，可以通过一下进行

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