美文网首页
Vue 混合App IOS 标题不更新问题

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

作者: 我是syq吖 | 来源:发表于2021-03-30 11:46 被阅读0次

    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>
    

    相关文章

      网友评论

          本文标题:Vue 混合App IOS 标题不更新问题

          本文链接:https://www.haomeiwen.com/subject/gbgwhltx.html