github源码地址:https://github.com/ichanghe/keep_alive
欢迎star
目标:
- 在页面中,第一次进入的时候,请求获取数据。
- 点击某个子页面,跳到相应页面,再从详情页后退回到列表页时,不刷新数据。
可以理解为 a->b->c ,
- a进入b页面查询数据,
- b进入c页面查询数据,
- c进入b页面读缓存
- b进入a页面读缓存
方法实现:
在 App.vue
设置:
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
export default new Router({
mode: "hash",
routes: [
{
path: "/",
name: "A",
component: Apage,
meta:{
keepAlive: true,
useCache:false
}
},
{
path: "/bpage",
name: "B",
component: Bpage,
meta: {
keepAlive: true,
useCache:false
}
},
{
path: "/cpage",
name: "C",
component: Cpage,
meta:{
keepAlive: true,
useCache:false
}
}
]
});
在a页面使用activated 和 beforeRouteEnter钩子函数,当页面从b或c页面进入,就读内存;如果不是就加载数据
activated() {
if(!this.$route.meta.useCache){
this.onLoad(); // 这是我们获取数据的函数
}else{
console.log('此时我们读缓存')
}
},
beforeRouteEnter(to, from, next) {
if (from.name === 'B'||from.name === 'C') {
//判断是从哪个路由过来的,若是detail页面不需要刷新获取新数据,直接用之前缓存的数据即可
to.meta.useCache = true
}
next()
},
在b页面分别使用activated 和 beforeRouteEnter钩子函数,判断是从a页面进入,会调用this.onLoad方法;从c页面进入,读缓存
activated() {
if(!this.$route.meta.useCache){
this.onLoad(); // 这是我们获取数据的函数
}else{
console.log('此时我们读缓存')
}
},
beforeRouteEnter(to, from, next) {
if (from.name === 'C') {
//判断是从哪个路由过来的,若是detail页面不需要刷新获取新数据,直接用之前缓存的数据即可
to.meta.useCache = true
}
next()
},
在c页面使用activated,因为只有c页面永远需要查询数据
activated() {
this.onLoad(); // 这是我们获取数据的函数
},