Vue 代码demo运行动画:
situation
一个常见的的场景,
主页 -->前进 列表页-->前进 详情页,详情页 -->返回 主页 -->返回 列表页
我们希望,
从 详情页 -->返回 列表页 的时候页面的状态是缓存,不用重新请求数据,提升用户体验。
从 列表页 -->返回 主页 的时候页面,注销掉列表页,以在进入不同的列表页的时候,获取最新的数据。
那么
keep-alive
是 Vue
提供的一个抽象组件,主要用于保留组件状态或避免重新渲染。
但是 keep-alive
会把其包裹的所有组件都缓存起来。
action
我们把需求分解成2步来实现
1.把需要缓存和不需要缓存的视图组件区分开
思路如下图:
-
写2个
router-view
出口
-
<keep-alive>
-
-
<router-view v-if="$route.meta.keepAlive">
-
</router-view>
-
</keep-alive>
-
-
-
<router-view v-if="!$route.meta.keepAlive">
-
</router-view>
-
在
Router
里定义好需要缓存的视图组件
-
new Router({
-
routes: [
-
{
-
path: '/',
-
name: 'index',
-
component: () =import('./views/keep-alive/index.vue'),
-
meta: {
-
deepth: 0.5
-
}
-
},
-
{
-
path: '/list',
-
name: 'list',
-
component: () =import('./views/keep-alive/list.vue'),
-
meta: {
-
deepth: 1
-
keepAlive: true
-
}
-
},
-
{
-
path: '/detail',
-
name: 'detail',
-
component: () =import('./views/keep-alive/detail.vue'),
-
meta: {
-
deepth: 2
-
}
-
}
-
]
-
})
2.按需keep-alive
我们从官方文档提供的api入手,
keep-alive
组件如果设置了 include
,就只有和 include
匹配的组件会被缓存,
所以思路就是,动态修改 include
数组来实现按需缓存。
-
<keep-alive>
-
<router-view :include="include" v-if="$route.meta.keepAlive">
-
</router-view>
-
</keep-alive>
-
<router-view v-if="!$route.meta.keepAlive">
-
</router-view>
让我们在app.vue里监听路由的变化,
-
export default {
-
name: "app",
-
data: () =({
-
include: []
-
}),
-
watch: {
-
$route(to, from) {
-
-
if (to.meta.keepAlive) {
-
!this.include.includes(to.name) && this.include.push(to.name);
-
}
-
-
//再根据 deepth 来判断是前进还是后退
-
-
if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
-
var index = this.include.indexOf(from.name);
-
index !== -1 && this.include.splice(index, 1);
-
}
-
}
-
}
-
};
需要注意的是
keep-alive
需要其包裹的组件有name属性,
我们上面的代码中的 push
和 splice
的是 router
的 name
。
所以建议大家把 route
的 name
属性设置和 route
对应 component
的 name
设成一样的。
result
让我们验证一下我们的成果
在 vue-devtool 里,灰色的组件,代表是缓存状态的组件,注意观察 list
的变化。
写在最后
-
实现按需
keep-alive
,网上有方法,通过修改route
配置里的meta
里的keepAlive
值来实现。
直接修改 meta
的值,可能会出现上图的情况,keep-alive里有一直有一个缓存的 list,正常的 rotuer-view
里也有一个,
复现这个问题需要很长得篇幅,感兴趣的朋友可以自己去爬一下坑。
-
还有得方法是 通过在keep-alive 的视图组件在退出 rotuer 的时候,调用this.$destory() 直接摧毁组件,这会导致组件没法在缓存,这个bug ,在官方issue有提到。
参考资料
官方issue
Vue项目全局配置页面缓存,实现按需读取缓存