原文链接:https://my.oschina.net/u/3649083/blog/3028533
一. 安装
npm install vue-wechat-title --save
二. 使用
在main.js中引入
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)
在router>index.js中添加meta对象配置title
const router = new Router({
routes: [
...
{
path: "/gameDesc",
name: 'gameDesc',
component: resolve => import('@/pages/Game/gameDesc'),
meta:{
title: '游戏说明'
}
},
{
path: "/integralList",
name: 'integralList',
component: resolve => import('@/pages/Game/integralList'),
meta:{
title: '积分收取记录'
}
}
...
]
});
router.afterEach(route => {
// 从路由的元信息中获取 title 属性
if (route.meta.title) {
document.title = route.meta.title;
// 如果是 iOS 设备,则使用如下 hack 的写法实现页面标题的更新
if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
const hackIframe = document.createElement('iframe');
hackIframe.style.display = 'none';
hackIframe.src = '/static/html/fixIosTitle.html?r=' + Math.random();
document.body.appendChild(hackIframe);
setTimeout(_ => {
document.body.removeChild(hackIframe)
}, 300)
}
}
});
export default router;
在App.vue中修改router-view