vue动态设置title,使用 vue-wechat-title

vue-wechat-title组件(解决app内嵌h5，ios获取不到title的问题)

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

安装依赖包

npm install vue-wechat-title --save

引用在main.js

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

在router.js中配置需要的title，每个不同的路由配置所属的title

 {
      path: '/',
      name: 'homePage',
      component: resolve => require(['../components/homePage'],resolve),
      meta: {
        title:"这是动态title",
        content: 'disable',
      }

监听路由变化改变title

    // 路由发生变化修改页面title
   if (to.meta.title) {
     document.title = to.meta.title;
   }
}

在需要改变title的vue组件中

<template>
    <div class="customerCaseDetail" v-wechat-title="这是是动态title">
 
    </div>
</template>

实例：在全局main.js文件使用