h5动态/接口获取title

1.动态设置title

router/index.js文件里的信息。在meta对象里面配置一个title

{
    path: "/",
    name: "Home",
    meta: {
      title: "首页"//这是重点
    },
 }

在main.js中，使用路由守卫beforeEach，在路由跳转之前判断跳转之后的页面是否配置的有title值。如果有则替换title，如果没有则保持title不变。

router.beforeEach((to, from, next) => {
  if (to.meta.title) { //判断是否设置title
    document.title = to.meta.title
  }
})

2.接口赋值title（首页）

接口异步调用会导致赋值延迟，不可以在beforeEach或页面内beforeRouteEnter中异步调用接口赋值title，会导致当前页面渲染不成功，跳转后渲染至下一页面

//设置title 在main中封装，next()之前调用;queryParams为浏览器参数，判断宿主,to为router.beforeEach中路由
await setTitle(queryParams,to);

//设置title
async function setTitle(QP,To){
  if (To.meta.title) {
    if(QP.state == 'YSF'){   //YSF--宿主为云闪付（云闪付内嵌小程序）
      window.upsdk.pluginReady (function(){
        if(To.meta.title == '首页'|| To.meta.title == '我的'){
          window.upsdk.setTitleStyle({
            backBtnVisible: '0', // 可选，左侧返回按钮是否显示。'0'不显示，'1'显示，不传或空则默认显示
          });
        }else{
          window.upsdk.setTitleStyle({
            backBtnVisible: '1', // 可选，左侧返回按钮是否显示。'0'不显示，'1'显示，不传或空则默认显示
          });
        }
        window.upsdk.setNavigationBarTitle({
            title: To.meta.title
        });
      })
    }else if(QP.state == 'DD'){ //YSF--宿主为钉钉（钉钉内嵌小程序）
      dd.ready(function() {
        if(To.path == "/"){
         //接口调用，调用钉钉api赋值title
          http.configKey().then(TempOpen=>{
            if(TempOpen[1].data){
              // document.title = TempOpen[1].data;
              dd.biz.navigation.setTitle({
                title: TempOpen[1].data,
              })
            }else {
              dd.biz.navigation.setTitle({
                title: To.meta.title,
              })
            }
          });
        }else{
          dd.biz.navigation.setTitle({
            title: To.meta.title,
          })
        }
      })
    }
    else{
        //其他宿主使用iframe,目前仅验证微信内嵌公众号可行，其他未验证
      if(To.path == "/"){
        console.log('首页更换title_main_function')
        let sendInfo = {
          schoolId:0,
          configKey:'h5.index.title'
        }
        var TempOpen = await http.configKey(sendInfo);
        if(TempOpen[1].data){
          document.title = TempOpen[1].data
        } else {
          document.title = ''
        }
        let iframe = document.createElement('iframe');
        // iframe.src = require('./favicon.ico');
        iframe.style.display = 'none';
        // 这个就是我们异步获取 title 的函数
        let fn = function () {
          setTimeout(function () {
            iframe.removeEventListener('load', fn);
            document.body.removeChild(iframe);
            console.log('title', document.title);
          }, 0);
        };

        iframe.addEventListener('load', fn);
        document.body.appendChild(iframe);
      }else{
        document.title = To.meta.title
      }
    }
  }
}