使用keep-alive动态实现页面缓存

假设有A，B，C三个页面，实现离开B页面进入C页面，缓存B页面数据(keepAlive: true)；离开B页面进入A页面，不缓存B页面数据(keepAlive: false);

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

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

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

• 父组件内根据路由中的keepAlive字段动态使用keep-alive标签

class Home extends Vue {

    get keepAlive () {
      // 获取当前路由的元信息中的keepAlive字段
      return this.$route.meta.keepAlive
    }

    private render () {
      return (
        

          {
            !this.keepAlive && 
          }
          
            {
              this.keepAlive && 
            }
          
        
      )
    }
  }

  export default Home

实现思路

• 由于现在组件的keep-alive是动态根据路由元信息中的keepAlive字段进行动态使用的，所有只要动态改变对应路由元信息的keepAlive字段就可以i实现动态缓存。

实现方法

// 操作指定name的路由的元信息
private changeKeepAlive (parentName: string, name: string, keepAlive: boolean) {
  // @ts-ignore
  this.$router.options.routes.map((item: any) => {
    if (item.name === parentName) {
      item.children.map((a: any) => {
        if (a.name === name) {
          a.meta.keepAlive = keepAlive
        }
      })
    }
  })
}

beforeRouteLeave (to: any, from: any, next: any) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    if (to.name === 'C') {
      this.changeKeepAlive('Home', 'B', true)
    } else {
      this.changeKeepAlive('Home', 'B', false)
    }
    next()
  }

说明：此方法不操作beforeRouteLeave中的from对象改变keepAlive；直接操作this.$router中对应路由元信息的keepAlive