缓存组件的新用法
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 ]