如图所示

解决方案，在App.vue中全局设置

<template>
  <!-- <div id="app" ref="homePage">
    <router-view/>
  </div>
   -->
  <div id="app" v-cloak ref="homePage">
    <!--缓存想要缓存的页面，实现后退不刷新-->
    <!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面-->
    <div style="padding-top: 35PX" v-if="isFullScreen"></div>
    <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        isFullScreen: false,  // 是否全面屏、刘海屏
      }
    },
    mounted(){
      this.isFromApp = localStorage.getItem("isFromApp") ? localStorage.getItem("isFromApp") : false
      const rate = window.screen.height / window.screen.width;    
      let limit =  window.screen.height == window.screen.availHeight ? 1.8 : 1.65; // 临界判断值   
      // window.screen.height为屏幕高度
      //  window.screen.availHeight 为浏览器 可用高度
      if (rate > limit) {
        this.isFullScreen = true;
      }
    },
    methods:{
  }
</script>
<style>
  #app{
    height: 100%;
  }
</style>