缓存页面keep-alive

2022-07-25  本文已影响0人  懒懒猫

使用场景

一个列表页中存在条件筛选,查询到相关数据后跳转到第二页, 选择一条数据进入详情页,后需要在详情页返回列表页时,列表页不刷新即进入详情页前(第二页,筛选条件依旧存在)的状态,就需要缓存页面。
下来就来讲讲使用keep-alive缓存页面。

keep-alive是什么

作用

在组件切换过程中 把切换出去的组件保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性

生命周期

keep-alive包裹的组件,会自动新增两个生命周期函数
activated(组件激活时执行)
deactivated(组件失活时执行)
初次进入时:beforeRouteEnter>created > mounted > activated;退出后触发 deactivated
再次进入:beforeRouteEnter> activated,事件挂载的方法等;退出后触发 deactivated(只执行一次的放在 mounted 中;组件每次进去执行的方法放在 activated 中)
keep-alive包裹的组件,其生命周期只能被执行一次,再次进入时不会被执行 ,不使用 keep-alive 时 每次切换组件 会重复销毁组件---创建组件 重复发起请求调取数据

keep-alive实现路由缓存主要有三种方式:

缓存所有

<keep-alive>
     <router-view></router-view>
</keep-alive>

使用include或者exclude

include和exclude 可以使用逗号分隔的字符串、正则、数组;并且匹配的都是组件的name属性
数组内的name对应的是component中export出去的name,而不是router的name

缺点:这样缓存页面,虽然可以实现部分组件的缓存,但是会出现生命周期只执行一次,第二次不管从什么地方进入,都不能重新加载页面
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- Array (use `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

根据v-if控制显示的router-view(条件缓存)\

针对该文章的使用场景,推荐使用该方法

 // 首页
      {
        path: '/homePage',
        name: 'HomePage',
        component: () => import('@/views/homePage/index'),
        meta: { title: '首页' }
      },
      // 订单管理
      {
        path: '/waybill',
        name: 'WaybillManage',
        component: RouteView,
        redirect: '/waybill/list',
        meta: { title: '订单管理' },
        children: [
          {
            path: '/waybill/list',
            name: 'WaybillManage',
            component: () => import('@/views/waybillManage/index'),
            meta: { title: '订单管理', keepAlive: true }
          },
          {
            path: '/waybill/list/:id',
            name: 'addOrCheck',
            component: () => import('@/views/waybillManage/components/addOrCheck'),
            hidden: true,
            meta: { title: '订单详情' }
          }
        ]
      },
 <!-- 需要缓存的视图组件 --> 
 <keep-alive v-if="$route.meta.keepAlive">
        <router-view></router-view>
 </keep-alive>

 <!-- 不需要缓存的视图组件 -->
 <router-view v-else></router-view>

3.待缓存页面(该例订单管理列表页)index.vue设置keep-alive
离开该页面时,若下一个页面是详情页则缓存,否则不缓存

 beforeRouteLeave (to, from, next) {
    if (to.name === 'addOrCheck') {
      // 进入详情,需要缓存的路由name
      from.meta.keepAlive = true
      next()
    } else {
      from.meta.keepAlive = false
      next()
    }
  },
上一篇下一篇

猜你喜欢

热点阅读