tba-hzz-xc/gw-ui/src/frontLayout/tabViewContainerWithRouter.vue

<template>
  <div id="tabViewContainer">
    <div id="viewsItemBar">
      <transition name="fade-transform" mode="out-in">
        <router-view :key="key" />
      </transition>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const key = computed(() => route.fullPath)
</script>

<style scoped>
#tabViewContainer { width: 100%; height: 100%; display: flex; flex-direction: column; }
#viewsItemBar { flex: 1; overflow: auto; }
.fade-transform-enter-active { transition: all .2s ease; }
.fade-transform-leave-active { transition: all .15s ease; }
.fade-transform-enter-from { opacity: 0; transform: translateY(8px); }
.fade-transform-leave-to { opacity: 0; }
</style>