vuepress页面标题目录右侧

写在前面：

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

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

主要思路：

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

1 /*实例化vue-router*/
  2 var router = new VueRouter({
  3 	linkActiveClass:'mui-active',
  4 	routes:[
  5 		{
  6 			path:'/',redirect:"/course/courseList",
  7 		},
  8 		{
  9 			path:'/course/courseList',
 10 			component:courseList,
 11 			name:"全部课程",
 12 			meta:{
 13 				title:"全部课程"
 14 			}
 15 		},
 16 		{
 17 			path:'/course/courseInfo/:courseId',
 18 			component:courseInfo
 19 		},
 20 		{
 21 			path:'/course/myCourse',
 22 			component:myCourse,
 23 			name:"我的课桌",
 24 			meta:{
 25 				title:"我的课桌"
 26 			}
 27 		},
 28 		{
 29 			path:'/personal/personalCenter/:studentId',
 30 			component:personalCenter,
 31 			name:"个人中心",
 32 			meta:{
 33 				title:"个人中心"
 34 			}
 35 		},
 36 		{
 37 			path:'/personal/personalInfo',
 38 			component:personalInfo,
 39 			name:"个人信息",
 40 			meta:{
 41 				title:"个人信息"
 42 			}
 43 		},
 44 		{
 45 			path:'/personal/learningRecord',
 46 			component:learningRecord,
 47 			name:"学习记录",
 48 			meta:{
 49 				title:"学习记录"
 50 			}
 51 		},
 52 		{
 53 			path:'/personal/myClass',
 54 			component:myClass,
 55 			name:"我的班级",
 56 			meta:{
 57 				title:"我的班级"
 58 			}
 59 		},
 60 		{
 61 			path:'/fuli/articleList',
 62 			component:articleList,
 63 			name:"轻友福利",
 64 			meta:{
 65 				title:"轻友福利"
 66 			}
 67 		}
 68 	]
 69 });

router

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

1 router.beforeEach((to, from, next) => {
  2 	if (to.meta.title) {
  3 	document.title = to.meta.title
  4 	}
  5 	next()
  6 })

router.beforeEach

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

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

1 const setWechatTitle = function(title) {
  2     document.title = title;
  3     let mobile = navigator.userAgent.toLowerCase();
  4     if (/iphone|ipad|ipod/.test(mobile)) {
  5         let iframe = document.createElement('iframe');
  6         iframe.style.visibility = 'hidden';
  7         let iframeCallback = function() {
  8             setTimeout(function() {
  9                 iframe.removeEventListener('load', iframeCallback)
 10                 document.body.removeChild(iframe)
 11             }, 10)
 12         };
 13         iframe.addEventListener('load', iframeCallback)
 14         document.body.appendChild(iframe)
 15     }
 16 };
 17 // 第二种修改title的方法，其中包含iframe的设置：
 18 let setTitleHack = function (t) {
 19     document.title = t;
 20     let iframe = document.createElement('iframe');
 21     iframe.style.visibility = 'hidden';
 22     iframe.style.width = '1px';
 23     iframe.style.height = '1px';
 24     // iframe.src = '//m.baidu.com/favicon.ico';
 25     iframe.onload = function () {
 26         setTimeout(function () {
 27             iframe.remove();
 28         }, 10);
 29     };
 30     document.body.appendChild(iframe);
 31 };
 32 
 33 // 在文件的最下方输出这两个方法：
 34 module.exports = {
 35     setWechatTitle,
 36     setTitleHack
 37 };

utils

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

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

并在created中调用该方法：

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

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