缓存组件的新用法

1.缓存组件的介绍：用来保留组件的状态，避免数据的污染。

2.缓存组件的用法

 1 <!-- 组件内部-->
 2 <keep-alive>
 3     <router-view v-if="$route.meta.keepAlive">
 4         <!-- 这里是会被缓存的视图组件，比如 Home！ -->
 5     </router-view>
 6 </keep-alive>
 7  
 8 <router-view v-if="!$route.meta.keepAlive">
 9     <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
10 </router-view>

 1 //router/index.js
 2     export default [
 3       {
 4         path: '/',
 5         name: 'home',
 6         component: Home,
 7         meta: {
 8           keepAlive: true // 需要被缓存
 9         }
10       }, {
11         path: '/:id',
12         name: 'edit',
13         component: Edit,
14         meta: {
15           keepAlive: false // 不需要被缓存
16         }
17       }
18     ]

3.组件缓存的另一种用法

　　注意：当组件在缓存组件中切换：他的activated和deactivated这俩个声明周期函数将会被执行

1 <!--只要将缓存的组件的name名称放到include里面即可-->
2 <!--不需要缓存的组件的name名称放到exclude里面即可-->
3 <keep-alive>
4     <router-view :exclude="[]" :include="['home']">
5     </router-view>
6 </keep-alive>

 1 //router/index.js
 2     export default [
 3       {
 4         path: '/',
 5         name: 'home',
 6         component: Home
 7       }, {
 8         path: '/:id',
 9         name: 'edit',
10         component: Edit
11       }
12     ]

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 nuxt api缓存，组件缓存，页面缓存 VUE 组件缓存与刷新 golang开发缓存组件 .Net Core缓存组件(MemoryCache)【缓存篇（二）】 myBatis组件之缓存实现及使用 Vue实现组件信息的缓存 keep-alive 组件级缓存使用 Angular RouteReuseStrategy 缓存（路由）组件 vue 实现部分路由组件缓存 vue-router（缓存路由组件对象）