vue 搜索 会员中心 收藏 动态 消息 创作 Vue 动态改变title——vue-wechat-title组件

问题：

在app内嵌h5的混合应用中，iOS系统下部分APP的webview中的标题不能通过 document.title = xxx 的方式修改，原因是在IOS webview中网页标题只加载一次，动态改变是无效的。

解决app内嵌h5，ios获取不到title的问题

1.安装

npm install vue-wechat-title --save

2.在main.js中引入

import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

3.在router>index.js中添加meta对象配置title

const router = new Router({

routes: [
...
{
path: "/homeIndex",
name: 'homeIndex',
component: resolve => import('@/pages/home/index'),
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)
}
}
});

4.在App.vue中修改router-view

<router-view v-wechat-title='$route.meta.title'></router-view>

标签：vue,title,会员中心,meta,hackIframe,router,document
来源： https://www.cnblogs.com/wj365794/p/15179851.html