vue实现路由切换改变title功能

├── index.html
├── main.js
├── api
│  └── ... # 抽取出API请求
├── common
│  └── constants.js  //title值
├── components
│  ├── HelloWorld.vue
│  ├── Test.vue
│  ├── User.vue
│  └── ...
├── router
│  └── index.js

import Vue from 'vue'
import Router from 'vue-router'
import constants from '../common/constants'
Vue.use(Router)
const router = new Router({
 routes: [{
    path: '/',
    name: 'HelloWorld',
    component: reslove => require(['../components/HelloWorld'], reslove)
  },{
   path: '/hello',
   name: 'hello',
   props: {name: 'garrett'},
   component: reslove => require(['../components/Test'], reslove)
  },{
   path: '/user',
   name: 'user',
   component: reslove => require(['../components/User'], reslove)
  },{
   path: '*',
   redirect: {name: 'hello'}
  }]
})
//导航后置守卫，可以在确定导航到目标页面时再更改title
router.afterEach((to, from) => {
 window.document.title = constants[to.name];
})
export default router;

constants.js的内容如下：
export default{
 HelloWorld: '首页',
 hello: '欢迎页',
 user: '用户页'
}