2018-05-24Vue 微信端动态改变页面title的npm
npm install vue-wechat-title 安装
const router = new VueRouter({
mode: 'history',
routes:[
{
name: 'index',
path: '/',
meta: {
title: '甘慧琳'
},
component: index
}
component: root
}
]
});
Vue.use(require('vue-wechat-title')); //实例化
献上大神源码
(function () {
function install (Vue) {
var setWechatTitle = function (title, img) {
if (title === undefined || window.document.title === title) {
return
}
document.title = title
var mobile = navigator.userAgent.toLowerCase()
if (/iphone|ipad|ipod/.test(mobile)) {
var iframe = document.createElement('iframe')
iframe.style.display = 'none'
// 替换成站标favicon路径或者任意存在的较小的图片即可
iframe.setAttribute('src', img || '/favicon.ico')
var iframeCallback = function () {
setTimeout(function () {
iframe.removeEventListener('load', iframeCallback)
document.body.removeChild(iframe)
}, 0)
}
iframe.addEventListener('load', iframeCallback)
document.body.appendChild(iframe)
}
}
Vue.directive('wechat-title', function (el, binding) {
setWechatTitle(binding.value, el.getAttribute('img-set') || null)
})
}
if (typeof exports === 'object') {
module.exports = install
} else if (typeof define === 'function' && define.amd) {
define([], function () {
return install
})
} else if (window.Vue) {
Vue.use(install)
}
})()