点击刷新
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。(可以理解为冻结页面)
使用方法：
1 <keep-alive> 2 <component> 3 <!-- 该组件将被缓存！ --> 4 </component> 5 </keep-alive>
props
- include - 字符串或正则表达，只有匹配的组件会被缓存
- exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
1 // 组件 a 2 export default { 3 name: 'a', 4 data () { 5 return {} 6 } 7 }
1 <keep-alive include="a"> 2 <component> 3 <!-- name 为 a 的组件将被缓存！ --> 4 </component> 5 </keep-alive>可以保留它的状态或避免重新渲染
1 <keep-alive exclude="a"> 2 <component> 3 <!-- 除了 name 为 a 的组件都将被缓存！ --> 4 </component> 5 </keep-alive>可以保留它的状态或避免重新渲染
router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存：
1 <keep-alive> 2 <router-view> 3 <!-- 所有路径匹配到的视图组件都会被缓存！ --> 4 </router-view> 5 </keep-alive>
如果只想 router-view 里面某个组件被缓存，怎么办？
- 使用 include/exclude
- 增加 router.meta 属性
使用 include/exclude
1 // 组件 a 2 export default { 3 name: 'a', 4 data () { 5 return {} 6 } 7 }
1 <keep-alive include="a"> 2 <router-view> 3 <!-- 只有路径匹配到的视图 a 组件会被缓存！ --> 4 </router-view> 5 </keep-alive>
缺点：需要知道组件的 name，项目复杂的时候不是很好的选择
增加 router.meta 属性
1 // routes 配置 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 ]
1 <keep-alive> 2 <router-view v-if="$route.meta.keepAlive"> 3 <!-- 这里是会被缓存的视图组件，比如 Home！ --> 4 </router-view> 5 </keep-alive> 6 7 <router-view v-if="!$route.meta.keepAlive"> 8 <!-- 这里是不被缓存的视图组件，比如 Edit！ --> 9 </router-view>
优点：不需要例举出需要被缓存组件名称
© 著作权归作者所有
举报
发表评论
0/200
