Vue 混合App IOS 标题不更新问题

2021-03-30  本文已影响0人  我是syq吖

mian.js

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

在router>index.js中添加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)
    }
  }
});

在App.vue中修改router-view

<router-view v-wechat-title='$route.meta.title'></router-view>
上一篇 下一篇

猜你喜欢

热点阅读