11.记录Vue项目实现移动端首页布局

首先分三个部分，头部是所有页面都需要共用的封装成组件，底部是部分页面需要的也封装成组件，可以通过v-if判断是否显示，内容部分是不同页面通过路由跳转获得。

首先封装头部组件，title 头部标题根据路由改变，hasBack 是否显示返回箭头图标。

<template>
  <div class="top-bar" :class="[ !hasBack ? 'center' : 'between' ]">
    <van-icon v-if="hasBack" class="back-icon" name="arrow-left" @click="$router.go(-1)" />
    <span>{{title}}</span>
    <div></div>
  </div>
</template>

<script>
export default {
  props: {
    title: { type: String, default: "" },
    hasBack: { type: Boolean, default: false },
  },
};
</script>
<style lang="scss" scoped>
.top-bar {
  display: flex;
  align-items: center;
  background: #25b4db;
  color: #fff;
  padding: 0 2vw;
  font-size: 4.5vw;
  box-sizing: border-box;
}
.center {
  justify-content: center;
}
.between {
  justify-content: space-between;
}
</style>

然后封装底部导航栏，这里使用了vant组件的底部导航，通过to跳转路由。

<template>
  <div>
    <van-tabbar route v-model="active">
      <van-tabbar-item  replace name='phone_cggl' to="/phone_Home/phone_cggl" icon="home-o">常规管理</van-tabbar-item>
      <van-tabbar-item  replace name='phone_my' to="/phone_Home/phone_my" icon="contact">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
  mounted() {
    let self = this;
  },
  methods: {
    loadData() {
    },
  },
};
</script>

现在写主页面调用头部底部，内容部分可以根据路由跳转，监听路由跳转获取头部标题和返回图标是否显示，底部是否显示等，这些在路由写好。

<template>
  <div>
    <div class="layout">
      <Layout>
        <Header>
          <phone-header :title="title" :hasBack="hasBack"></phone-header>
        </Header>
        <Content :style="{height:contentHeight + 'px',overflow:'auto'}">
          <router-view  v-if="isRouterAlive" />
        </Content>
        <Footer v-if="footerHidden">
          <phone-footer></phone-footer>
        </Footer>
      </Layout>
    </div>
  </div>
</template>

<script>
import PhoneHeader from "./phone_model/phone_header";
import PhoneFooter from "./phone_model/phone_footer";
export default {
  provide() {
    return {
      reload: this.reload, // 刷新当前页码
    };
  },
  components: {
    PhoneHeader,
    PhoneFooter,
  },
  data() {
    return {
      title: "常规管理", // 头部标题
      hasBack: false, // 头部左边返回箭头是否显示
      contentHeight: 600, // 中部内容高度
      footerHidden: true, // 底部是否显示
      isRouterAlive: true, // 刷新当前页码
    };
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        let self = this;
        self.title = val.meta.title;
        self.hasBack = val.meta.hasBack;
        self.footerHidden = val.meta.footerHidden;
        if (self.footerHidden) {
          self.contentHeight = document.documentElement.clientHeight - 94; //内部content高度
        } else {
          self.contentHeight = document.documentElement.clientHeight - 44; //内部content高度
        }
        // console.log(val);
      },
      // 深度观察监听
      deep: true,
    },
  },
},
</script>

路由，感觉这样写会有BUG，跳转页面后刷新会回到主页，路由丢失等问题，因为第一次写移动端框架布局还不能写出很好的结构。