vue動態設置頁面title方法（解決app內嵌h5，ios獲取不到title的問題）

一. 安裝
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
<router-view v-wechat-title='$route.meta.title'></router-view>