keep-alive属性: include - 字符串或正则表达式。只有匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。
用法:
缓存动态组件: 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们(此种方式并无太大的实用意义)。
1 2 3 4 5 6 7 8 9 10 缓存路由组件: 使用keep-alive可以将所有路径匹配到的路由组件都缓存起来,包括路由组件里面的组件,keep-alive大多数使用场景就是这种。方式一:vue文件中 1 2 3 4 方式二:router.js中
{ path: ‘/as’, icon: ‘earth’, title: ‘赠品管理’, name: ‘as’, component: Main, children: [{ path: ‘a’, title: ‘赠品管理’, name: ‘a’, component: () => import (’@/views/a/index.vue’), meta:{ keepAlive:true } }] } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 缓存你想要缓存的: 使用v-if通过路由元信息判断缓存哪些路由
//router配置 new Router({ routes: [ { path: '/', name: 'home', component: Home, meta: { keepAlive: true // 需要被缓存 } }, { path: '/edit', name: 'edit', component: Edit, meta: { keepAlive: false // 不需要被缓存 } } ] }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 生命周期钩子: 在被keep-alive包含的组件/路由中,会多出两个生命周期的钩子:activated 与 deactivatedactivated在组件第一次渲染时会被调用,之后在每次缓存组件被激活时调用
deactivated:组件被停用(离开路由)时调用
注意:使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁),因为组件没被销毁,被缓存起来了。
我不想把查询条件和查询结果被缓存,那么我可以这样写:
mounted: function() { this.loaddata(1) }, activated: function () { this.productclass.name=""//查询条件 this.loaddata(1) //查询结果的方法 } 1 2 3 4 5 6 7 新增属性: include:匹配的 路由/组件 会被缓存 exclude:匹配的 路由/组件 不会被缓存 include和exclude支持三种方式来有条件的缓存路由:采用逗号分隔的字符串形式,正则形式,数组形式。 正则和数组形式,必须采用v-bind形式来使用。
缓存组件的使用方式:
<!-- 正则表达式 (使用 `v-bind`) --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- 数组 (使用 `v-bind`) --> <keep-alive :include="['a', 'b']"> <component :is="view"></component> </keep-alive>1 2 3 4 5 6 7 8 9 10 11 12 13 14 但更多场景中,我们会使用keep-alive来缓存路由:
1 2 3 注:当组件被exclude匹配,该组件将不会被缓存,不会调用activated 和 deactivated。 ———————————————— 版权声明:本文为博主「雷佳佳❤雷佳佳」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/weixin_44369568/article/details/90727668