vue实现路由切换改变title

由于vue项目通常是单页应用，因此在入口文件index.html只有一个title，单页所展示的若干页面只是随着路由的切换而在同一个index.html上不同的渲染而已，因此此时的title属性是不会随着页面的切换而变更的

那么想实现路由切换title变换可以通过vue-router的导航守卫来实现，最简单的的目录结构可如下所示

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

下面主要就是vue-router的内容了，其他页面级别的内容无关紧要

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;

在这里使用全局后置守卫来对路由切换进行统一操作，全局前置守卫在正常情况下也可以，但是如果出现导航一半终止掉，会出现页面没有被渲染为目标导航页面，但是title以及被替换掉了，因此这里使用全局后置守卫是相对稳妥的，由上面可以看出实际的关键代码也就三行，其他照旧

constants.js的内容如下：

export default{
	HelloWorld: '首页',
	hello: '欢迎页',
	user: '用户页'
}

只是简单将对象导出

关于导航守卫不清楚的可以参考我的另外一篇博客vue-router导航守卫