如何在微信中给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中定义 不要多处使用!!

    
    
自定义加载的图片地址 默认是 ./favicon.ico 可以是相对或者绝对的

你可能感兴趣的:(如何在微信中给Vue单页应用设置标题)