Vue如何根据不同的路由设置不同的title标题

{
    path:'/billSystem',
    name:'bill_system',
    component:() => import('../views/bill_system/index.vue'),
    meta:{
        title:'账单管理',
        keepAlive:false
    }
},

//路由前置守卫；用来设置元信息
router.beforeEach((to,from,next)=>{
  if(to.meta.title){
    document.title=to.meta.title
  }
  next()
})

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    redirect:'/dashBoard',
    component: () => import('../views/Home.vue'),
    children:[
      {
        path:'/dashBoard',
        name:'dash_board',
        component:() => import('../views/dash_board/index.vue'),
        meta:{
          title:'首页',//配置title
          keepAlive:false,//是否缓存
          requireAuth:false//是否需要身份验证
        }
      },
      {
        path:'/accountInfo',
        name:'account_info',
        component:() => import('../views/account_info/index.vue'),
        meta:{
          title:'账户信息',
          keepAlive:false,
          requireAuth:false
        }
      },
      {
        path:'/billSystem',
        name:'bill_system',
        component:() => import('../views/bill_system/index.vue'),
        meta:{
          title:'账单管理',
          keepAlive:false,
          requireAuth:false
        }
      },
      {
        path:'/applicationInfo',
        name:'application_info',
        component:() => import('../views/application_info/index.vue'),
        meta:{
          title:'应用数据',
          keepAlive:false,
          requireAuth:false
        }
      },
      {
        path:'/userSystem',
        name:'user_system',
        component:() => import('../views/user_system/index.vue'),
        meta:{
          title:'用户管理',
          keepAlive:false,
          requireAuth:false
        }
      }
    ]
  }
]

const router = new VueRouter({
  routes
})
//路由前置守卫；用来设置元信息
router.beforeEach((to,from,next)=>{
  if(to.meta.title){
    document.title=to.meta.title
  }
  next()
})

export default router