使用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 (
        <div>
          {
            !this.keepAlive && <router-view />
          }
          <keep-al