vue中各个组件添加标题
写在前⾯：
最近公司在做的开发，我的任务是在服务号中嵌套第三⽅页⾯，也就是公司⾃⼰负责的页⾯，技术我选的是vue，应为在之前的开发经历中并没有使⽤过vue，这也是⼀次新的尝试，当然在开发过程中会遇到⼀系列之前没有遇到的问题，不过这不是重点，只要有解决问题的那⼀刻就⾮常⼼满意⾜了。
因为vue的特性，页⾯与页⾯之间是通过路由的改变来请求ajax的，所以，浏览器是不会产⽣刷新⾏为的，所以，在“不同的页⾯”之间添加不同的标题也是⼀个问题，我在⽹上查阅了些资料后，发现问题确实是可以解决的。
主要思路：
在⽹上查阅了很多资料后发现，主要思路是通过路由的改变，在路由配置⾥添加不同路由页⾯的meta属性：
1/*实例化vue-router*/
2var router = new VueRouter({iframe嵌套页面加载慢
3  linkActiveClass:'mui-active',
4  routes:[
5  {
6    path:'/',redirect:"/course/courseList",
7  },
8  {
9    path:'/course/courseList',
10    component:courseList,
11name:"全部课程",
12    meta:{
13    title:"全部课程"
14    }
15  },
16  {
17    path:'/course/courseInfo/:courseId',
18    component:courseInfo
19  },
20  {
21    path:'/course/myCourse',
22    component:myCourse,
23name:"我的课桌",
24    meta:{
25    title:"我的课桌"
26    }
27  },
28  {
29    path:'/personal/personalCenter/:studentId',
30    component:personalCenter,
31name:"个⼈中⼼",
32    meta:{
33    title:"个⼈中⼼"
34    }
35  },
36  {
37    path:'/personal/personalInfo',
38    component:personalInfo,
39name:"个⼈信息",
40    meta:{
41    title:"个⼈信息"
42    }
43  },
44  {
45    path:'/personal/learningRecord',
46    component:learningRecord,
47name:"学习记录",
48    meta:{
49    title:"学习记录"
50    }
51  },
52  {
53    path:'/personal/myClass',
54    component:myClass,
55name:"我的班级",
56    meta:{
57    title:"我的班级"
58    }
59  },
60  {
61    path:'/fuli/articleList',
62    component:articleList,
63name:"轻友福利",
64    meta:{
65    title:"轻友福利"
66    }
67  }
68  ]
69 });
router
在 router 中设置完成以后还需要在router.beforeEach()中设置document.title:
1 router.beforeEach((to, from, next) => {
2if (to.meta.title) {
3document.title = to.meta.title
4  }
5  next()
6 })
router.beforeEach
这样⼤概的样式就可以出来了：
但是这种效果只是适⽤于固定的标题，如果需要根据⽬标路由页⾯设置不同的标题的话，这样做就不能满⾜要求了，这是就需要借助于⽹上封装的设置标题的⽅法：(setWechatTitle)：具体代码如下：
1const setWechatTitle = function(title) {
2document.title = title;
3    let mobile = LowerCase();
4if (/iphone|ipad|ipod/.test(mobile)) {
5        let iframe = ateElement('iframe');
6        iframe.style.visibility = 'hidden';
7        let iframeCallback = function() {
8setTimeout(function() {
9                veEventListener('load', iframeCallback)
veChild(iframe)
11            }, 10)
12        };
13        iframe.addEventListener('load', iframeCallback)
14document.body.appendChild(iframe)
15    }
16 };
17// 第⼆种修改title的⽅法，其中包含iframe的设置：
18 let setTitleHack = function (t) {
19document.title = t;
20    let iframe = ateElement('iframe');
21    iframe.style.visibility = 'hidden';
22    iframe.style.width = '1px';
23    iframe.style.height = '1px';
24// iframe.src = '//m.baidu/favicon.ico';
25    load = function () {
26setTimeout(function () {
27            ve();
28        }, 10);
29    };
30document.body.appendChild(iframe);
31 };
32
33// 在⽂件的最下⽅输出这两个⽅法：
ports = {
35    setWechatTitle,
36    setTitleHack
37 };
utils
将当前代码引⼊到要设置标题的⽬标路由组件中，
1/*引⼊修改组件标题js*/
2import { setWechatTitle, setTitleHack } from '../../kits/utils.js';
并在created中调⽤该⽅法：
1 created(){
2this.id = this.$urseId;//获取路由参数
3  setWechatTitle(this.bookInfo.title);
4 },
这⾥的“this.bookInfo.title”是通过vue-resource发送请求获取到的，这⾥我⽤假数据代替的（公司后台还没有⽣成接⼝⽂档），这样，当前
的“this.bookInfo.title”就成为了当前组件的标题，⽽且标题会随着title的改变⽽改变：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。