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

前端框架如Vue、React等都是单页面的应用，也就是说整个web站点其实都是一个index页面，所谓的页面跳转都是替换index.html里边的内容，而页面的title是在每个页面初始化的时候才设置一次。对于现在的前端框架，传统的每个页面设置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= newRouter({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:personInfo22 },23 {24       path:'/signprotocol',25       name:'signProtocol',26       title:'签署协议',27 component:signProtocol28 }29 ]30 })31 router.beforeEach((to, from, next) =>{32 next()33 });34 router.afterEach((transition)=>{35   let name =transition.name36   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中增加了参数title，在路由结束钩子afterEach里取到对应页面的title，再设置上去就可以了

需要用到的utils里的方法如下：

1 import axios from 'axios';2 const SCREEN_WIDTH =document.body.clientWidth3 const SCREEN_HEIGHT=document.body.scrollHeight4 functionservice_sidi(url,body,successCallback,errorCallBack){5   axios.post(process.env.Host_url+url,body).then(function(result){6 successCallback(result)7   },function(error){errorCallBack(error)})8 }9 functionservice_jz(url,body,successCallback,errorCallBack){10   axios.post(process.env.Host_url+url,body).then(function(result){11 successCallback(result)12   },function(error){errorCallBack(error)})13 }14 functionsetTitle(title) {15   document.title =title16   var mobile =navigator.userAgent.toLowerCase()17   if (/iphone|ipad|ipod/.test(mobile)) {18     var iframe = document.createElement('iframe')19     iframe.style.display = 'none'
20     //iframe.setAttribute('src', '')
21     var iframeCallback = function() {22       setTimeout(function() {23         iframe.removeEventListener('load', iframeCallback)24 document.body.removeChild(iframe)25       }, 0)26 }27     iframe.addEventListener('load', iframeCallback)28 document.body.appendChild(iframe)29 }30 }31 var obj={32 service_sidi:service_sidi,33 service_jz:service_jz,34 SCREEN_WIDTH:SCREEN_WIDTH,35 SCREEN_HEIGHT:SCREEN_HEIGHT,36 setTitle:setTitle37 }38 export default obj;