vue根据router设置页面标题title

index.js

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);

export default new Router({
  routes: [
    { path: '*', redirect: '/personal' },
    {
      path: '/personal',
      name: 'personal',
      component: Template,
      children: [
        {
          name: 'homepage',
          path: '/personal/',
          component: PersonalHP,
          meta: {
            // 页面标题title
            title: '我的主页'
          }
        },
        {
          name: 'zjjl',
          path: '/personal/zjjl',
          component: PersonalHP,
          meta: {
            // 页面标题title
            title: '征集记录'
          }
        },
        {
          name: 'wdxj',
          path: '/personal/wdxj',
          component: PersonalHP,
          meta: {
            // 页面标题title
            title: '我的信件'
          }
        },
        {
          name: 'ysqgk',
          path: '/personal/ysqgk',
          component: PersonalHP,
          meta: {
            // 页面标题title
            title: '依申请公开'
          }
        }
      ]
    }
  ]
});

main.js

import router from './router'
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})