VUE缓存：动态keep-alive

路总归是有的，就看愿不愿意剑走偏锋了。

场景

在最近的开发中，设计有A、B、C三个页面，试想这样一个场景需求：

• 离开B页面进入C页面，缓存B页面数据（keepAlive: true）
• 离开B页面进入A页面，不缓存B页面数据（keepAlive: false)

概念

• keep-alive

  • keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
  • keep-alive: vue文档

• 组件内的守卫 - beforeRouteLeave

  • 导航离开该组件的对应路由时调用
  • 可以访问组件实例 this
  • 组件内的守卫: vue-router 文档

前置背景：keep-alive 组件实现

• 路由元信息内添加特定字段如：keepAlive

  const router = new VueRouter({
   
  routes: [
    {
   
      path: '/foo',
      component: Foo,
      children: [
        {
   
          path: 'bar',
          component: Bar,
          // a meta field
          meta: {
    
            keepAlive: true 
          }