理解

默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的

如果可以缓存路由组件对象, 可以提高用户体验

解决方式

给router-view添加key属性

<router-view :key="$route.fullPath"/>

给router-view 添加key属性: 简单粗暴，类似于v-if：会销毁重建组件，有一定的性能损耗

使用watch监听id变化重新拉取接口

export default {
  name: 'TopCategory',
  components: { GoodsItem },
  setup () {
    console.log('setup。。。。。。。。。。。。')
    // 轮播图
    const sliders = ref([])
    // findBanner().then(data => {
    //   console.log('findBanner', data)
    //   sliders.value = data.result
    // })

    // 分类数据
    const route = useRoute()
    const cate = ref({})
    // findTopCategory(route.params.id).then(data => {
    //   console.log('findTopCategory', data)
    //   cate.value = data.result
    // })

    // 监听 route.params.id的变化
    // watch(对象 | 数组 | 函数, (newVal, oldVal) => {}, { immediate: true | false, deep: true | false })
    watch(() => route.params.id, (newVal) => {
      console.log('route.params.id变化了...', newVal)

      findBanner().then(data => {
        console.log('findBanner', data)
        sliders.value = data.result
      })
      findTopCategory(route.params.id).then(data => {
        console.log('findTopCategory', data)
        cate.value = data.result
      })
    }, { immediate: true })
    return { sliders, cate }
  }
}
</script>

watch( route.param.id): 没有销毁重建。从更底层的方式（侦听响应式数据的变化）去切入重发请求

使用onBeforeRouteUpdate钩子函数

<script>
import { onMounted, ref } from 'vue'
import { findBanner } from '@/api/home.js'
import { findTopCategory } from '@/api/category.js'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import GoodsItem from './components/goods-item.vue'

export default {
  name: 'TopCategory',
  components: { GoodsItem },
  setup () {
    // 轮播图
    const sliders = ref([])

    // 分类数据
    const route = useRoute()
    const cate = ref({})

    const loadData = (id) => {
      findBanner().then(data => {
        console.log('findBanner', data)
        sliders.value = data.result
      })
      findTopCategory(id).then(data => {
        console.log('findTopCategory', data)
        cate.value = data.result
      })
    }

    // 只执行一次
    onMounted(() => {
      loadData(route.params.id)
    })

    // 路由变化时执行
    // to： 要跳转的路由对象
    onBeforeRouteUpdate((to) => {
      console.log('onBeforeRouteUpdate...............', to)
      loadData(to.params.id)
    })
    return { sliders, cate }
  }
}
</script>

onBeforeRouteUpdate : 没有销毁重建。理解更加自然