vue动态设置页面title方法（解决app内嵌h5，ios获取不到title的问题）

原文链接：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