切换Tab页面不重复刷新页面/请求数据问题

一、内置组件----keepAlive

Vue2官方文档：https://v2.cn.vuejs.org/v2/api/#keep-alive
Vue3官方文档：https://cn.vuejs.org/guide/built-ins/keep-alive.html

• 作用：当多个组件（页面）之间进行切换时可对组件（页面）中的内容进行缓存，其内部存在缓存机制
• 用法：
  • Vue2用法：

  <!-- App.vue中 -->
   <router-view v-else-if="isRouterAlive" v-slot="{ Component }">
      <keep-alive :include="['App']">
        <component :is="Component" />
      </keep-alive>
    </router-view>

• Vue3用法：

   <!-- App.vue中 -->
    <template>
      <div id="app">
        <keep-alive >
          <router-view></router-view>
        </keep-alive>
      </div>
 </template>

内部缓存机制

组件默认是不存在缓存机制的，只要切换到下一个组件就会销毁当前的组件，此时可通过改内置组件将当前的组件进行销毁，内部缓存机制：

1. 缓存所有界面

   <!-- App.vue中 -->
    <template>
      <div id="app">
        <keep-alive >
          <router-view></router-view>
        </keep-alive>
      </div>
 </template>

2. 缓存部分页面

• 使用$route.meta属性

  <!-- App.vue中 -->
    <te