liveh5-nuxt/app/components/AppFooter.vue

<script setup>
import { useAppFooterRouteNames as names } from '@/config/index.js'
import MyIcon from "@/components/icons/MyIcon.vue";
import HomeIcon from "@/components/icons/HomeIcon.vue";
const route = useRoute()
const active = ref(0)
const show = computed(() => {
  if (route.name && names.includes(route.name))
    return true
  return false
})
const initData=()=>{
  active.value=route.path==='/profile'?1:0
}
watchEffect(initData)
onMounted(()=>{
  initData()
})
</script>

<template>
 <div v-if="show" v-memo="[active]" >
   <van-tabbar  v-model="active" route placeholder fixed>
     <van-tabbar-item replace to="/">
       <span>{{ $t('tabbar.home') }}</span>
       <template #icon>
         <HomeIcon :active="active===0"></HomeIcon>
       </template>
     </van-tabbar-item>
     <van-tabbar-item replace to="/profile">
       <span>{{ $t('tabbar.profile') }}</span>
       <template #icon>
         <MyIcon :active="active===1"></MyIcon>
       </template>
     </van-tabbar-item>
   </van-tabbar>
 </div>
</template>