动态组件 %26 异步组件-keep-alive

如何去保证一个组件的状态

    <!-- vue2.x配置 -->
   <keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>

  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"  v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component"  v-if="!$route.meta.keepAlive"/>
  </router-view>

key重复问题

https://github.com/vuejs/core/issues/1865

业务组件使用

路由配置-路由中配置好需要缓存的实例

  {
    path: "/finance/difference",
    name: "Difference",
    meta: {
      title: "差错处理",
      keepAlive:true,
      auth: 27,
    },
    component: () => import(/* @vite-ignore */ "@/views/finance/difference/index.vue"),
  },
  {
    path: "/finance/processing",
    name: "Processing",
    meta: {
      title: "长款处理",
      keepAlive:true,
      auth: 136,
    },
    component: () => import(/* @vite-ignore */ "@/views/finance/processing/list.vue"),
  },

layout

引入组件实例的方式， 用keep-alive包裹

  <router-view v-slot="{ Component }">
        <keep-alive>
            <component
                :is="Component"
                :key="$route.fullPath"
                v-if="$route.meta.keepAlive"
            />
        </keep-alive>
        <component
            :is="Component"
            :key="$route.fullPath"
            v-if="!$route.meta.keepAlive"
        />
    </router-view>

这里注意keep-alive ，有属性max，可以设置最大缓存组件数量，这里没有加限制

此时组件缓存已经生效，但是在组件业务的切换时，不会自动刷新请求

监听路由去控制请求（可用，不推荐）

import { onBeforeRouteUpdate } from "vue-router";

onActivated特殊周期（可用，推荐）

• 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated，所以别在mounted和activated方法中写相同的逻辑代码
• 多页面缓存需要配置key属性，来表示组件的唯一性和对应关系，如：:key=”$route.path”
• 不要动态修改meta.keepAlive的值控制是否缓存，因为第一次是创建组件，没有缓存，需要缓存后，下一次进入才不会触发逻辑代码，如果最开始进入的时候meta.keepAlive值为false的话，渲染的是没有使用keep-alive的组件，则会触发相应代码

onActivated(() => { // 被包裹组件被激活的状态下触发
      // 逻辑代码
 }
onDeactivated(() => { // 在被包裹组件停止使用时触发
    // 逻辑代码
})