【Vue】页面跳转时 keep-alive 失效问题

keep-alive 作用

keep-alive作用：切换路由时，从A页面跳转到B页面，缓存A页面的状态，再次从B页面返回至A页面时，A页面保持原状态不再重新渲染

keep-alive 使用

include属性

• include：指定哪些组件会被缓存，需要搭配name使用，name为组件名，匿名组件不能被匹配
• exclude：指定哪些组件不会被缓存
• max：设置最大缓存个数，只缓存距离当前最近的 Max个组件

  <router-view class="router-view" v-slot="{ Component, route }">
    <!-- include：需要被缓存的组件,只有 Home 组件被缓存，其他组件无缓存效果 -->
    <keep-alive include="Home">
      <component :is="Component"/>
    </keep-alive>
  </router-view>

activated() 与 deactivated()

包含在 keep-alive 中的组件比其他组件会多出 activated() 和deactivated() 两个生命周期函数

使用 keep-alive 包裹的组件会被缓存因而只有在页面第一次进入时才会执行created -> mounted 函数，所以可以通过 activated() 和 deactivated () 在每次进入页面时更新组件部分状态

activated：进入组件/缓存路由时被调用
deactivated：离开组件/缓存路由时被调用
进入页面的执行顺序为 created -> mounted -> activated

当从 A 页面 跳转到 B 页面再返回至 A 页面后，需要保持 A页面的 tab 以及筛选功能 维持原状，而 tab 下的列表数据需发生变化，就可以将列表更新写在 activated() 函数中

  mounted() {
    //
  },
  activated() {
    // 从详情页返回时，主页状态不变，数据实时更新
    this.$nextTick(() => {
      // 加载该标签页下的签到列表数据
      this.$refs.activelist.init(this.isIssue, this.activeName, this.data);
    });
  },

从 B页面返回至 A页面，只会执行 activelist 而不执行 mounted

keep-alive 注意事项

遇到的问题：需要从 A 页面跳转到 B 页面 或 C 页面，单 keep-alive 只在从 A页面跳转到 B页面时生效，跳转到 C 页面时无法缓存 A 页面状态
原因：需要保证 B 和 C 页面的路由 与 A 路由在同一级 kee-alive 才能生效

{
    path: '/',
    redirect: '/Home',
    component: Layout,
    children: [
    // A页面
    {
      id: '1',
      name: 'Home',
      path: '/Home',
      component: () => import('@/views/home/index.vue'),
    },
    // B页面
    {
      name: 'Bdetail',
      path: '/Detail/Bdetail',
      component: () => import('@/views/Detail/Bdetail.vue'),
    },
    // C页面
    {
      name: 'Cadd',
      path: '/Cadd',
      component: () => import('@/views/Cadd/Cadd.vue'),
    },
}