vue 提取公共头部、脚部组件一闪而过

在项目中提取了一个公共的头部、脚部组件

<template>
  <div id="app">
    <Header></Header>
    <router-view/>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
export default {
  name: 'App',
  components: {
    Header: Header,
    Footer: Footer,
  },
}
</script>

发现启动项目的时候，头部和脚部组件一闪而过，F5刷新同样一闪而过

最后发现是这个position: absolute;绝对定位的锅

/* 整体盒子 */
#Product {
  position: absolute;//把这个绝对定位去掉就好了
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  background-color: #e0e1e2;
}