Vue设置页面的title

原文地址：http://www.cnblogs.com/JimmyBright/p/7410771.html

前端框架如Vue、React等都是单页面的应用，也就是说整个web站点其实都是一个index页面，所谓的页面跳转都是替换index.html里边的内容，而页面的title是在每个页面初始化的时候才设置一次。对于现在的前端框架，传统的每个页面设置title标签的做法是不行的。

下面是在Vue框架下，利用路由来设置title的思路，当然还有别的方法。

先看项目目录

Vue设置页面的title

router的index.js代码如下：

 1 import Vue          from 'vue'
 2 import Router       from 'vue-router'
 3 import signProtocol from '@/components/pages/signProtocol'
 4 import personInfo   from '@/components/pages/personInfo'
 5 import uploadPhoto  from '@/components/pages/uploadPhoto'
 6 import utils        from '@/lib/utils'
 7 Vue.use(Router)
 8 var router= new Router({
 9   mode:'history',
10   routes: [
11     {
12       path: '/',
13       name: 'uploadPhoto',
14       title:'上传身份证',
15       component: uploadPhoto,
16     },
17     {
18       path:'/personinfo',
19       name:'personInfo',
20       title:'提交信息',      
21       component:personInfo
22     },
23     {
24       path:'/signprotocol',
25       name:'signProtocol',
26       title:'签署协议',      
27       component:signProtocol
28     }
29   ]
30 })
31 router.beforeEach((to, from, next) => {
32   next()
33 });
34 router.afterEach((transition)=>{
35   let name = transition.name
36   let item = router.options.routes.filter((ele)=>{return ele.name == name})
37   console.log(item[0].title)
38   utils.setTitle(item[0].title)
39 })
40 export default router;

router/index.js