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">

上一篇下一篇

猜你喜欢

热点阅读