路由缓存 keep-alive

最新推荐文章于 2024-01-08 17:39:59 发布

原创最新推荐文章于 2024-01-08 17:39:59 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

keep-alive 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了Vue中路由缓存keep-alive的使用，强调了include生效的条件——需指向组件的name而非路由name，并且keep-alive必须放在组件的最内层。同时，建议路由name与组件name保持一致以便管理。针对特定需求，如A列表页缓存及B编辑页返回后刷新数据，提出了通过设置meta属性和在activated钩子中更新数据的解决方案。

备注1 ：keep-alive include 生效条件

1、include 里面的 name 指的是单文件组件中的name,例如 ClientList.vue 中的name, 不是指路由中的name

2、keep-alive 必须要放在最后一级，include才会生效，例如，A 页面嵌套 Asub 页面，则keep-alive要放在Asub页面，而不是放在A页面中

备注2 ：路由中的 name 需统一与单文件组件中的 name 一致，这样的目的是为了后期好管理，它们两个name没有什么必然的联系

需求：A 列表页缓存，点击编辑进入B编辑页，B页面编辑完后返回A页面，A页面要刷新表格数据

1、路由处理：增加meta ，keepAlive是否要缓存的标志

        {
          path: 'list',
          name: 'AList',
          component: () => import('../views/AList'),
          meta: { keepAlive:true },
        },
        {
          path: 'edit',
          name: 'BEdit',
          component: () => import('../views/BEdit'),
          meta: { keepAlive: false },
        },

2、最后一级总页面，例如 layout.vue

   <template>
        <div>
            <keep-alive>
                  <!-- 需要缓存的视图组件 -->
                  <router-view v-if="$route.meta.keepAlive"/> 
                </keep-alive>
                <!-- 不需要缓存的视图组件 -->
                <router-view v-if="!$route.meta.keepAlive" />
        </div>
    </template>

3、在A列表页面，activated 中重新调表格接口进行刷新表格数据

    activated () { // 使用了keep-alive，当页面激活的时候就会触发的函数
        let reqData = { // 接口参数
            page: this.currPage, 
            pageSize: this.currPageSize,
            ...this.curSearch
        }
        this.getColorList(reqData) // 获取表格数据
      },