Vue设置页面的title

Posted 2020-10-03 流火行者

原文地址：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= 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

代码中在router中增加了参数title，在路由结束钩子afterEach里取到对应页面的title，再设置上去就可以了

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

 1 import axios from \'axios\';
 2 const SCREEN_WIDTH = document.body.clientWidth
 3 const SCREEN_HEIGHT=document.body.scrollHeight
 4 function service_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 function service_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 function setTitle(title) {
15   document.title = title
16   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:setTitle
37 }
38 export default obj;

lib/utils/index.js