写法
<keep-alive :include=“a, b">
<component :is=“view></component>
</keep-alive>
<keep-alive :include=“/a|b/">
<component :is=“view></component>
</keep-alive>
<keep-alive :include=“[‘a’, ‘b']">
<component :is=“view></component>
</keep-alive>
具体使用
- 1.路由meta中记录使用keep-alive的路由
{
path: '/home',
component: () => import('../home.vue'),
meta: {
title: ',
keepAlive: true
}
}
- 2.创建router实例时加上scrollBehavior方法
export default new Router ({
mode: 'history',
base: process.env.BASE_URL,
routers,
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return {
x: 0,
y: 0
}
}
}
})
- 3.在需要缓存的router-view上包裹keep-alive组件
<keep-alive>
<router-view v-if=“$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if=“!$route.meta.keepAlive"></router-view>
- 4.不同情况下可设置缓存和不缓存的路由,可以使用路由钩子做判断
beforeRouteLeave (to, from, next) {
this.loading = true
if (to.path === '/home') {
from.meta.keepAlive = true
} else {
from.meta.keepAlive = false
}
next()
}