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的改變而改變：