缓存组件

Posted on 2020-03-17 09:27  张雪冬前端学习园地  阅读(907)  评论(0)  编辑  收藏  举报

缓存组件的新用法

 

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     ]