nastiNte-Ui/src/App.vue

<template>
  <div id="app" class="detail">
    <navigation v-if="$route.meta.keepAlive" style="z-index: 10000" class="detail-header"/>
    <router-view style="padding-top: 62px;" class="detail-wrapper"/>
<!--    <el_footer v-if="$route.meta.keepAlive||$route.meta.footer"/>-->
    <el_footer v-if="$route.meta.footer === false?$route.meta.footer:$route.meta.keepAlive" class="detail-close"/>
   </div>
</template>

<script>
import navigation from './views/navigation/navigation'
import el_footer from './views/footer/index'
import { request } from './request/request'
import Cookies from 'js-cookie';
export default {
  name: 'App',
  components:{
    navigation,
    el_footer
  },
  data() {
    return {

    };
  },
  methods: {

  }
};
</script>

<style scoped lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.detail {
  /* 因为是遮罩效果所以要fixed */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  /*必须 */
  display: flex;
  /* 必须，规定元素的排列方向 */
  flex-direction: column;
  /* 必须占满屏 */
  height: 100%;
  overflow: auto;
}

.detail-header {
  width: 100%;
  height: 100px;
}

.detail-wrapper {
  width: 100%;
  flex: 1;
}

.detail-close {
  flex: 0;
  margin: 0 auto;
}
</style>