keep-alive

keep-alive

keep-alive是什么

• 它是一个加载非动态组件的一个组件，使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

它里面有三个属性一个是include另一个是exclude属性还有一个max

1.include是被keep-alive中加上include的标签包裹住的组件会被缓存的。

2.exclude是被keep-alive中加上exclude的标签包裹住的组件不会被缓存的。

3.max是定义缓存组件上限。

代码的作用

• 它可以缓存组件的里的数据不用再次请求

应用场景1

代码实现

1.keep-alive缓存不活动的组件

1.创建两个组件
一个写个input框和一个按钮
<button> 切换组件 </button>
<div>
    <keep-alive>
    <input/>//里面写上几个数值
    </keep-alive>
</div>
另一个是个空白组件就是做切换效果的

它的效果：是你点击按钮来回切换你写的那几个数值还在input框里

注意：一般情况下组件进行切换的时候，会被默认销毁，如果有需要不让组件销毁就可以用keep-alive来缓存一下

应用场景2

代码实现

1.keep-alive缓存不活动的组件

1.创建一个组件
一个写个input框和一个按钮
<button> 切换组件 </button>
<div>
    <keep-alive>
    <一个组件 加个判断 true>
    </keep-alive>
    <同一个组件 加个判断 false>
</div>
export default {
  name:"Curriculum",
    data() {
        return {
        写个变量：true
 }
    }
        }

它的效果：它是根据判断变量为true还是为false，true的话用keep-alive包裹的组件false的话用keep-alive以外的组件

应用场景3

• 可以用keep-alive来实现返回上级不刷新的效果

1.app.vue  <keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <!-- 除了需要缓存的路由 还要创建一个非缓存路由的入口-->
    <router-view v-if="!$route.meta.keepAlive"></router-view>

2.配置路由的地方配置全局keep-alive

复制代码
{
    path: "/funGoodsArea",
    name: "funGoodsArea",
    component: () => import("../views/activity/funGoodsArea.vue"), 
    meta: {
      title: "text",
      keepAlive: true
    }
  },
  3.在B的页面配置 beforeRouterLeave  ,其中funGoodsArea的路由

  //修改列表页的meta值，false时再次进入页面会重新请求数据。
  beforeRouteLeave (to, from, next) { 
    from.meta.keepAlive = false;
    next();
  },
4.同样在C页面中配置 

复制代码
  // 返回上一页路由不刷新问题
beforeRouteLeave (to, from, next) {
    if (to.path == "/funGoodsArea") {
      to.meta.keepAlive = true;
    } else {
      to.meta.keepAlive = false;
    }
    next();
  },