- 在 AppFooter 组件中,为最外层 div 添加 v-memo="[active]" 指令- 在 AppHeader 组件中,为 VanNavBar 组件添加 v-memo="[title, fullLive, showLeftArrow, subTitle]" 指令 - 移除了 AppHeader 组件中的 console.log 语句
38 lines
1011 B
Vue
38 lines
1011 B
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
|
|
}
|
|
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>
|