- 在ios下app 设置document.title = "titleName" 失效，原因是在IOS webview中网页标题只加载一次，动态改变是无效的。
-
vue中npm install vue-wechat-title组件
(1) 在路由配置中添加 meta对象 如：
image.png
(2) 路由尾部添加Vue.use(require('vue-wechat-title')); //实例化参数
(3) 所需要动态更改title的组件中顶部加入<div v-wechat-title="title"></div>，这里的title是你的动态标题变量
此时，安卓已经没有问题了，但是iosHIA是不行，那么接下来
(4) 在路由配置js里面添以下代码
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)
}
}
});
- 我是添加到了main.js文件里了，然后在static下添加一个空页面
image.png
这样，ios就可以获取到动态标题了。
雪莲的博客
自行总结：
其实就是利用浏览器回流机制，让IOS浏览器去重新监听title变化，从而解决不刷新的问题
