vue 中各个组件添加标题

写在前面：

     最近公司在做微信公众号的开发，我的任务是在微信服务号中嵌套第三方页面，也就是公司自己负责的页面，技术我选的是vue，应为在之前的开发经历中并没有使用过vue，这也是一次新的尝试，当然在开发过程中会遇到一系列之前没有遇到的问题，不过这不是重点，只要有解决问题的那一刻就非常心满意足了。

因为vue的特性，页面与页面之间是通过路由的改变来请求ajax的，所以，浏览器是不会产生刷新行为的，所以，在“不同的页面”之间添加不同的标题也是一个问题，我在网上查阅了些资料后，发现问题确实是可以解决的。

主要思路：

  在网上查阅了很多资料后发现，主要思路是通过路由的改变，在路由配置里添加不同路由页面的meta属性：

/*实例化vue-router*/
var router = new VueRouter({
	linkActiveClass:'mui-active',
	routes:[
		{
			path:'/',redirect:"/course/courseList",
		},
		{
			path:'/course/courseList',
			component:courseList,
			name:"全部课程",
			meta:{
				title:"全部课程"
			}
		},
		{
			path:'/course/courseInfo/:courseId',
			component:courseInfo
		},
		{
			path:'/course/myCourse',
			component:myCourse,
			name:"我的课桌",
			meta:{
				title:"我的课桌"
			}
		},
		{
			path:'/personal/personalCenter/:studentId',
			component:personalCenter,
			name:"个人中心",
			meta:{
				title:"个人中心"
			}
		},
		{
			path:'/personal/personalInfo',
			component:personalInfo,
			name:"个人信息",
			meta:{
				title:"个人信息"
			}
		},
		{
			path:'/personal/learningRecord',
			component:learningRecord,
			name:"学习记录",
			meta:{
				title:"学习记录"
			}
		},
		{
			path:'/personal/myClass',
			component:myClass,
			name:"我的班级",
			meta:{
				title:"我的班级"
			}
		},
		{
			path:'/fuli/articleList',
			component:articleList,
			name:"轻友福利",
			meta:{
				title:"轻友福利"
			}
		}
	]
});

在 router 中设置完成以后还需要在router.beforeEach()中设置document.title:

router.beforeEach((to, from, next) => {
	if (to.meta.title) {
	document.title = to.meta.title
	}
	next()
})

这样大概的样式就可以出来了：

但是这种效果只是适用于固定的标题，如果需要根据目标路由页面设置不同的标题的话，这样做就不能满足要求了，这是就需要借助于网上封装的设置微信标题的方法：(setWechatTitle):具体代码如下：

const setWechatTitle = function(title) {
    document.title = title;
    let mobile = navigator.userAgent.toLowerCase();
    if (/iphone|ipad|ipod/.test(mobile)) {
        let iframe = document.createElement('iframe');
        iframe.style.visibility = 'hidden';
        let iframeCallback = function() {
            setTimeout(function() {
                iframe.removeEventListener('load', iframeCallback)
                document.body.removeChild(iframe)
            }, 10)
        };
        iframe.addEventListener('load', iframeCallback)
        document.body.appendChild(iframe)
    }
};
// 第二种修改title的方法，其中包含iframe的设置：
let setTitleHack = function (t) {
    document.title = t;
    let iframe = document.createElement('iframe');
    iframe.style.visibility = 'hidden';
    iframe.style.width = '1px';
    iframe.style.height = '1px';
    // iframe.src = '//m.baidu.com/favicon.ico';
    iframe.onload = function () {
        setTimeout(function () {
            iframe.remove();
        }, 10);
    };
    document.body.appendChild(iframe);
};

// 在文件的最下方输出这两个方法：
module.exports = {
    setWechatTitle,
    setTitleHack
};

将当前代码引入到要设置标题的目标路由组件中，

/*引入修改组件标题js*/
import { setWechatTitle, setTitleHack } from '../../kits/utils.js'; 

并在created中调用该方法：

created(){
	this.id = this.$route.params.courseId;//获取路由参数
	setWechatTitle(this.bookInfo.title);
},

这里的“this.bookInfo.title”是通过vue-resource发送请求获取到的，这里我用假数据代替的（公司后台还没有生成接口文档），这样，当前的“this.bookInfo.title”就成为了当前组件的标题，而且标题会随着title的改变而改变：