利用v-if实现再次点击该导航栏刷新页面数据因为vue会自动缓存组件的数据,所以我们希望每次点击导航栏都刷新页面,会因为

因为vue会自动缓存组件的数据,所以我们希望每次点击导航栏都刷新页面,会因为vue的自动缓存,无法重走生命周期而被阻止,因此,可以使用v-if重新加载路由出口实现强制刷新

<template>
  <router-view v-if="reloadFlag" />
</<template>>
<script setup>
const menuSelect = (index) => {
  //  当点击导航时,判断index是否变化,如果变化则更新currentIndex,没变化则执行reload函数
  currentIndex.value === index ? reload() : (currentIndex.value = index)
}
// 销毁在创建组件dom元素
const reload = () => {
  reloadFlag.value = false
  nextTick(() => {
    reloadFlag.value = true
  })
}
</script>