keep-alive

作用: 缓存不活动的组件(vue的内置)

使用: keep-alive组件包裹路由占位

使用场景: 列表进详情需要把列表页缓存,将列表的滚动条的位置记录下来,当重新进入列表页的时候设置滚动条位置

按需缓存:

• kepp-alive上的include或exclude匹配的是组件的name
• 结合路由的meta,添加一个缓存标识,通过在keep-alive缓存的位置获取当前路由信息上的meta中的缓存标识进行控制是否显示keep-alive包裹router-view还是直接显示router-view
• 配合路由的meta信息

const routes = [
  {
    path: '/',
    name: 'home',
    meta: {
      keepAlive: true
    },
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

<RouterView v-if="!$route.meta.keepAlive"></RouterView>
<KeepAlive v-else>
  <RouterView />
</KeepAlive>

默认无法直接缓存滚动位置，需要手动记录

生命周期:

被缓存的组件激活: actived

被缓存的组件失活: deactived