wallet_app/src/layout/app/index.vue

<template> 

  <router-view
    v-slot="{ Component }"
  >
    <keep-alive v-if="route.meta.keepAlive">
      <component :is="Component" />
    </keep-alive>
    <component :is="Component" v-if="!route.meta.keepAlive"   />
  </router-view>

  <van-tabbar v-if="route.meta.tabbar" route active-color="#4765DD" inactive-color="#C4D0FF">
    <van-tabbar-item v-for="item in tabbarOptions" :key="item.to" replace :to="item.to">
      <template #icon="props">
        <svg-icon  class="tabbar-icon" :name="item.icon" />
      </template>
      {{ item.title }}
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup> 
import { getNotchHeight} from "@/utils/statusBar";

const route = useRoute(); 
const mainStyle = ref({});
 

const tabbarOptions = [
  // {
  //   title: "社交",
  //   icon: "tabbar-im",
  //   to: "/im",
  // },
  {
    title: "交易",
    icon: "tabbar-transaction",
    to: "/transaction",
  },
  {
    title: "钱包",
    icon: "tabbar-wallet",
    to: "/wallet",
  },
  {
    title: "DAPP",
    icon: "tabbar-dapp",
    to: "/dapp",
  },
  {
    title: "我的",
    icon: "tabbar-me",
    to: "/me",
  },
];




onBeforeMount(async () => {
  const height = await getNotchHeight();
  if (route.meta.navbar) {
    mainStyle.value.marginTop = `0 px`;
  } else {
    mainStyle.value = {
      marginTop: `${height}px`,
    };
  } 
});
</script>

<style scoped lang="less">
.tabbar-icon{
  width: 25px;
  height: 25px;
}
.van-tabbar--fixed{
  height: calc(60px + var(--safe-area-bottom));
  padding: 8px 0 var(--safe-area-bottom) 0;
  // padding-top: 10px;
  box-sizing: border-box;
} 
</style>