緩存組件的新用法

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刪除。

猜您在找 VUE 組件緩存與刷新 myBatis組件之緩存實現及使用 keep-alive 組件級緩存使用 Angular RouteReuseStrategy 緩存（路由）組件 vue 實現部分路由組件緩存 vue-router（緩存路由組件對象） vue中使用keepAlive組件緩存遇到的坑 Caffeine Cache-高性能Java本地緩存組件 SpringBoot2 整合Ehcache組件，輕量級緩存管理 vue服務端渲染頁面緩存和組件緩存的實例詳解