vue使用keep-alive缓存页面,返回页面时刷新部分数据
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue使用keep-alive缓存页面,返回页面时刷新部分数据相关的知识,希望对你有一定的参考价值。
参考技术A 生命周期执行顺序:1、不使用keep-alive的情况:beforeRouteEnter --> created --> mounted --> destroyed
2、使用keep-alive的情况:beforeRouteEnter --> created --> mounted --> activated --> deactivated
3、使用keep-alive,并且再次进入了缓存页面的情况:beforeRouteEnter -->activated --> deactivated
在keep-alive页面里的activated 监听路由的参数变化可以实现全页面刷新,
"$route.query.type": function name(paidrams)
if (this.$route.path === "当前的路径")
console.log("上次id", this.policyId, "本次id", this.$route.query.id);
if (this.policyId != this.$route.query.id||this.pageType!= this.$route.query.type)
console.log("路由参变化");
this.getDetail();
,
$route:
handler: function (val, oldVal)
if (val.path === "当前的路径")
console.log("监听路由变化", val, oldVal);
keep-alive 组件级缓存
前言
在Vue构建的单页面应用(SPA)中,路由模块一般使用vue-router。vue-router不保存被切换组件的状态,
它进行push或者replace时,旧组件会被销毁,而新组件会被新建,走一遍完整的生命周期。
但有时候,我们有一些需求,比如跳转到详情页面时,需要保持列表页的滚动条的深度,等返回的时候依然在这个位置,这样可以提高用户体验。
在Vue中,对于这种“页面缓存”的需求,我们可以使用keep-alive组件来解决这个需求。
keep-alive
<keep-alive> <router-view /> </keep-alive>
<keep-alive :include="[‘Home‘, ‘User‘]"> <router-view /> </keep-alive>
vue实现前进刷新,后退不刷新
希望实现前进刷新、后退不刷新的效果。即加载过的界面能缓存起来(返回不用重新加载),关闭的界面能被销毁掉(再进入时重新加载)。
例如对a->b->c 前进(b,c)刷新,c->b->a 后退(b,a)不刷新
知道路由是前进还是后退就好了,
这样的话我就能在后退的时候让from
路由的keepAlive
置为false
,
to
路由的keepAlive
置为ture
,就能在再次前进时,重新加载之前这个keepAlive
被置为false
的路由了
但是這個需要集合鈎子函數來是實現
// App.vue <div class="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div>
這個還是有爭議的。。。。
然後在一篇博客中看到用vux 來寫的,所以這邊也自己demo了下:
就是下面的代碼了:
实现条件缓存:全局的include数组
只需要将B动态地从include数组中增加/删除就行了
在Vuex中定义一个全局的缓存数组,待传给include:
export default { namespaced: true, state: { keepAliveComponents: [] // 缓存数组 }, mutations: { keepAlive (state, component) { // 注:防止重复添加(当然也可以使用Set) !state.keepAliveComponents.includes(component) && state.keepAliveComponents.push(component) }, noKeepAlive (state, component) { const index = state.keepAliveComponents.indexOf(component) index !== -1 && state.keepAliveComponents.splice(index, 1) } } }
在父页面中定义keep-alive,并传入全局的缓存数组:
// App.vue <div class="app"> <!--传入include数组--> <keep-alive :include="keepAliveComponents"> <router-view></router-view> </keep-alive> </div> export default { computed: { ...mapState({ keepAliveComponents: state => state.global.keepAliveComponents }) } }
缓存:在路由配置页中,约定使用meta属性keepAlive,值为true表示组件需要缓存。
在全局路由钩子beforeEach中对该属性进行处理,这样一来,每次进入该组件,都进行缓存:
const router = new Router({ routes: [ { path: ‘/A/B‘, name: ‘B‘, component: B, meta: { title: ‘B页面‘, keepAlive: true // 这里指定B组件的缓存性 } } ] }) router.beforeEach((to, from, next) => { // 在路由全局钩子beforeEach中,根据keepAlive属性,统一设置页面的缓存性 // 作用是每次进入该组件,就将它缓存 if (to.meta.keepAlive) { store.commit(‘global/keepAlive‘, to.name) } })
取消缓存的时机:对缓存组件使用路由的组件层钩子beforeRouteLeave。
因为B->A->B时不需要缓存B,所以可以认为:当B的下一个页面不是C时取消B的缓存,那么下次进入B组件时B就是全新的:
export default { name: ‘B‘, created () { // ...设置滚动条在最顶部 }, beforeRouteLeave (to, from, next) { // 如果下一个页面不是详情页(C),则取消列表页(B)的缓存 if (to.name !== ‘C‘) { this.$store.commit(‘global/noKeepAlive‘, from.name) } next() } }
因为B的条件缓存,是B自己的职责,所以最好把该业务逻辑写在B的内部,而不是A中,这样不至于让组件之间的跳转关系变得混乱。
一个需要注意的细节:因为keep-alive组件的include数组操作的对象是组件名、而不是路由名,
因此我们定义每一个组件时,都要显式声明name属性,否则缓存不起作用。而且,一个显式的name对Vue devtools有提示作用。
以上是关于vue使用keep-alive缓存页面,返回页面时刷新部分数据的主要内容,如果未能解决你的问题,请参考以下文章