keepalive 缓存页面 van-tabbar 切换页面时 表现不正常

一般使用底部导航的方法是：在需要导航的页面中加 导航组件，在这个导航组件中处理页面跳转行为

如果使用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>

标签：case,van,break,tabbar,router,导航,activeTabbar,页面
来源： https://www.cnblogs.com/zhanglw456/p/15428352.html