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'),
    },
}
Logo

前往低代码交流专区

更多推荐