wwbsr/pages/base/index.vue

<template>
  <v-page>
    <template v-for="item in navList">
      <component
        v-if="cashViews.includes(item.tel)"
        v-show="tab == item.tel"
        :is="item.tel"
        :key="item.tel"
        :isShow="tab == item.tel && tabShow"
        class="layout-main"
      ></component>
    </template>
    <ComFooter></ComFooter>
  </v-page>
</template>

<script>
import Home from "./home";
import ExchangeOperation from "./exchange-operation";
import Mine from "./mine";
import OptionList from "./option-list";
// import List from "./list";
import Contract from "./contract";
import { navList } from "@/config";
import ComFooter from "./components/footer.vue";
export default {
  name: "Base",
  components: {
    Home,
    ExchangeOperation,
    OptionList,
    Mine,
    Contract,
    ComFooter,
  },
  computed: {},
  data() {
    return {
      cashViews: [],
      tab: "",
      tabShow: true,
      navList: navList(this),
    };
  },
  methods: {
    tabChange(name) {
      this.tab = name;
      if (!this.cashViews.includes(name)) {
        this.cashViews.push(name);
      }
    },
  },
  onShow() {
    this.tabShow = true;
  },
  onLoad(query) {
    if (query.tel) {
      this.tabChange(query.tel);
    } else {
      this.tabChange("home");
    }
  },
  mounted() {},
  onHide() {
    this.tabShow = false;
  },
};
</script>
<style lang="scss" scoped>

.router-link-active {
  color: $theme-1;
}
</style>