vue-router-keep-alive
2019-11-03 本文已影响0人
年轻人不喝鸡汤
项目中会有这样的需求,有的页面需要缓存(例如列表页),有的页面不需要缓存(例如详情页),这时候就需要 keep-alive
<keep-alive>
<router-view></router-view>
</keep-alive>
keep-alive是vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染
设置keep-alive点击页面跳转时,不会频繁的创建(created)和销毁(destroy)
在app.vue中使用keep-alive才能在其他的组件中使用 activeated和deactivated
keep-alive有两个非常重要的属性
include - 字符串或者正则表达式,只有匹配的组件会被缓存
exclude - 字符串或者正则表达式,任何匹配的组件都不会被缓存
匹配多个:
<keep-alive exclude="profile,home">