keep-alive 的作用及使用场景

1.keep-alive作用的简介:

在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了.

2.vue在每次组件切换的时候上一个组件都会被销毁,如果你需要访问上一个组件就得重新渲染

keep-alive:主要用于保存组件状态 或避免重新渲染

应用场景:点击商品列表进入详情页面 点击返回按钮 回到商品列表页

语法:

第一种方法:

<keep-alive>

<router-view></router-view>

</keep-alive>

被keep-alive标签包裹的 路由都会被缓存起来 但是我们不需要缓存这么多组件

exclude：`字符串或正则表达式。任何匹配的组件都不会被缓存。

可以通过下面这种方法 include:字符串或正则表达式。只有匹配的组件会被缓存

    <keep-alive include='test'> //意思是 组件名为test的才会被缓存
      <router-view/>
    </keep-alive>

第二种方法在router路由中配置 在某个路由中加上一个meta属性

{

path:'/index',

component:()=>import('@/views/index'),

meta:{

keepAlice:true,//为true是缓存的意思

}

}