Vent-App/pages/index/index.vue

<template>
  <view>
    <home :cur="PageCur" v-if="PageCur == 'home'" :key="commponent1Key"></home>
    <history
      :cur="PageCur"
      v-if="PageCur == 'history'"
      :key="commponent2Key"
    ></history>
    <warndata
      :cur="PageCur"
      v-if="PageCur == 'warndata'"
      :key="commponent3Key"
    ></warndata>
    <operation v-if="PageCur == 'operation'" :key="commponent4Key"></operation>
    <filecenter
      :cur="PageCur"
      v-if="PageCur == 'filecenter'"
      :key="commponent5Key"
    ></filecenter>
    <u-tabbar
      :value="PageCur"
      @change="(name) => (PageCur = name)"
      :fixed="true"
      :placeholder="true"
      :safeAreaInsetBottom="true"
    >
      <u-tabbar-item
        text="设备监测"
        name="home"
        icon="list-dot"
        @click="NavChange('home')"
      ></u-tabbar-item>
      <u-tabbar-item
        text="历史数据"
        name="history"
        icon="calendar"
        @click="NavChange('history')"
      ></u-tabbar-item>
      <u-tabbar-item
        text="操作记录"
        icon="setting"
        name="operation"
        @click="NavChange('operation')"
      ></u-tabbar-item>
      <u-tabbar-item
        text="预警分析"
        icon="plus-circle"
        name="warndata"
        @click="NavChange('warndata')"
      ></u-tabbar-item>
      <u-tabbar-item
        text="文件中心"
        icon="file-text"
        name="filecenter"
        @click="NavChange('filecenter')"
      ></u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      PageCur: "home",
      commponent1Key: 0,
      commponent2Key: 1,
      commponent3Key: 2,
      commponent4Key: 3,
      commponent5Key: 4,
    };
  },
  onLoad: function () {
    this.PageCur = "home";
  },
  methods: {
    NavChange: function (e) {
      this.PageCur = e;
    },
  },
};
</script>

<style>
</style>