一般使用底部導航的方法是：在需要導航的頁面中加 導航元件，在這個導航元件中處理頁面跳轉行為

如果使用keepalive快取頁面， 可能會有一些不正常表現：

頁面切換，導航元件不重新渲染
導航title 高亮錯誤，即，點選A頁面，亮起來的缺失B頁面

處理方法：

在使用 導航元件時，新增key， 如： <TabBar key='A' />
在導航元件中，要確保本頁面的導航標題正確啟用

下面是一個導航元件：

<template>
  <van-tabbar v-model="activeTabbar" @change="onTabbarChange">
    <van-tabbar-item icon="home-o">A</van-tabbar-item>
    <van-tabbar-item icon="contact">B</van-tabbar-item>
    <van-tabbar-item icon="friends-o">C</van-tabbar-item>
  </van-tabbar>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

export default defineComponent({
  name: 'TabBar',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const activeTabbar = ref(0)

    setActiveTabbar()
    function setActiveTabbar() {
      switch (route.name) {
        case 'A':
          activeTabbar.value = 0
          break
        case 'B':
          activeTabbar.value = 1
          break
        case 'C':
          activeTabbar.value = 2
          break
        default:
      }
    }

    function onTabbarChange(index: number) {
     // 保持本頁面中的啟用狀態。點選導航標題 會改變本頁中activeTabbar的值，
     // 如果開啟頁面快取，那麼再次進入此頁面就不會重新初始化activeTabbar，所以要在路由跳轉前恢復activeTabbar
      setActiveTabbar() 
      switch (index) {
        case 0:
          router.push({ name: 'A' })
          break
        case 1:
          router.push({ name: 'B' })
          break
        case 2:
          router.push({ name: 'C' })
          break
        default:
      }
    }

    return {
      activeTabbar,
      onTabbarChange
    }
  }
})
</script>