vue 搜尋 會員中心 收藏 動態 訊息 創作 Vue 動態改變title——vue-wechat-title元件
阿新 • • 發佈：2021-08-24
問題：
在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>