vue keepalive 动态缓存页面

1,使用keep-alive标签

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

2,router配置缓存页面开关

      { // 模板列表
        path: 'templateList',
        name: 'template-lists',
        component(resolve) {
          require.ensure(['../../components/knowledge/templateList.vue'], () => {
            resolve(require('../../components/knowledge/templateList.vue'))
          })
        },
        meta: {
          title: '',
          keepAlive:true

        }
      },

3,路由钩子判断满足条件进行缓存

//动态使用keepAlive
beforeRouteLeave (to, from, next) { //A页面
    from.meta.keepAlive = false
    next()
}

beforeRouteLeave(to, from, next) {  //B页面
    console.log(to.name);
    if (to.name === "resource") {
      to.meta.keepAlive = true;
    }
    next();
}

以上代码即可实现动态页面缓存,有帮助到大家记得点赞关注!