如何在微信中给Vue单页应用设置标题

问题：

• 在iOS的微信中 一个SPA应用 想要改变微信顶部导航栏的标题 使用
  document.title = xxx来改变网页标题是无效的

• 原因大致就是因为在微信中webview只加载网页标题一次 动态改变是无效的 除非都以新页面打开(那SPA的用户体验有什么卵用吗)

解决方案：

• 既然js动态改变不能生效 那为什么不尝试在路由切换完成后 静默加载一个空iframe动态设置title呢?

Vuejs 2.x

npm install vue-wechat-title --save

Main.js

Vue.use(require('vue-wechat-title'))

路由定义

      routes: [
          {
            path: '/',
            name: 'index',
            meta: {
              title: '首页'
            },
            component: Index
        },
      ]

App.vue 建议全局只使用一次该指令 标题可用vuex或者router中定义 不要多处使用!!

    <!-- 任意元素中加 v-wechat-title 指令 建议将标题放在 route 对应meta对象的定义中 -->
    <div v-wechat-title="$route.meta.title"></div>
    <!--or-->
    <router-view v-wechat-title="$route.meta.title"></router-view>
   自定义加载的图片地址 默认是 ./favicon.ico 可以是相对或者绝对的
   <div v-wechat-title="$route.meta.title" img-set="/static/logo.png"></div>