下面是utils.js文件中的内容:
// 第一种修改title的方法 ：
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';
// 替换成站标favicon路径或者任意存在的较小的图片即可
iframe.setAttribute('src', '//m.baidu.com/favicon.ico');
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
};
};
准备好上面的代码，接下来就看你需要在哪里使用了，如果是单页面应用的话，我们一般是在router.js文件中使用，因为路由导航发生时会执行钩子，我们可以使用 router.beforeEach 注册一个全局的 before 钩子，然后在router.beforeEach((to, from, next) => {...})修改title。
使用方式如下：
import { setTitleHack } from './utils';
vue 2.0定义路由的时候，可以将所有的路由都放在一个组件配置对象中，同时，可以配置 meta 字段，在其中添加一个title的属性，值就是你这个页面要显示页面上方的title，像下面这样：
const routes = [
{path: '/auth', component: auth, name: 'auth', meta: {title: '�授权页'}},
{path: '/home', component: Home, name: 'home', meta: {title: ' 首页' }},
];
二，在beforeEach中直接像下面这样写就可以了。
router.beforeEach((to, from, next) => {
setTitleHack(to.meta.title);
next();
});
});
三，还有一种情况就是在单个组件中使用，比如说你当前这个页面的title是根据不同用户的姓名来，而用户的姓名都是通过后台来获取的，是动态的，所以，需要在用户详情的页面中来动态修改title，使用方式其实也差不多，下面就让我们来看一下代码：
同样也是先引用，我这次把两个方法都引用进来，上面我们用的是setTitleHack，下面我们来用一下setWechatTitle：
import { setWechatTitle, setTitleHack } from './../utils';
在我现在这个项目中，取数据的过程是在beforeCreate钩子中做的，项目中获取数据用的是vue-resource，修改title就在取到了数据以后，下面来看代码：
beforeCreate(){
let group_id = this.$route.params.id;
let dataUrl = "group/detail?group_id=" + group_id;
this.$http.get(dataUrl)
.then(({data:{code, content, jssdk, msg}}) => {
if (code === 0) {
this.content = content;
setWechatTitle(content.header.name + '团');
// 取到名称之后直接修改title。
} else {
MessageBox('提示', msg);
}
}, ({data:{msg}}) => {
MessageBox('提示', msg);
});
},
