vue3缓存页面keep-alive及路由统一处理详解
一、前言
当使用路由跳转到其他页面的时候,要求缓存当前页面,比如列表页面跳转到详情页面,需要缓存列表内容,并且保存滚动条位置,也有时候需要缓存的页面里面有部分内容不缓存,总之各种情况,下面就列举其中一些例子
vue2和vue3的使用方式是不一样的
created()方法和mounted()方法在页面初始化的时候会执行,如果缓存了页面,这两个方法都不会再执行,还有如果缓存了页面,vue2中的destroyed()和vue3中的unmounted()方法都不会执行
activated()方法在每次进入页面都会执行
二、使用
1.vue2和vue3的不同
vue2:
<template> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <!-- vue2.x配置 --> <keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> <router-view v-if="!$route.meta.keepAlive"/> </template>
vue3:
<template> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <!-- vue3.0配置 Component是固定写法--> <router-view v-slot="{ Component }"> <keep-alive> <component :is="Component" v-if="$route.meta.keepAlive"/> </keep-alive> <component :is="Component" v-if="!$route.meta.keepAlive"/> </router-view> </template>
route.js中配置:
path: '/', name: 'Home', component: Home, meta:{ keepAlive: true }
效果:
2.页面某些数据不需要缓存
可以在activated()方法中处理需要部分刷新的逻辑
... 需要部分刷新的数据:<input type="text" v-model="newStr" /> ... data() { return { newStr: "2", }; }, mounted() { console.log("执行了mounted方法"); this.newStr = "3"; }, activated() { console.log("执行了actived方法。。。"); this.newStr = "4"; }
效果:
3.动态设置keepAlive属性
也可以在vue文件中设置keepAlive属性,实测只有在beforeRouteEnter()方法中添加才会生效,即进入页面的时候
在Home.vue中添加:
// 使用组件内守卫,对离开页面事件做一些操作 // to为即将跳转的路由,from为上一个页面路由 beforeRouteEnter(to, from, next) { to.meta.keepAlive = true; // 路由继续跳转 next(); }
4.使用include,exclude配置需要缓存的组件
在app.vue中配置:
<router-view v-slot="{ Component }"> <keep-alive include="testKA"> <component :is="Component"/> </keep-alive> </router-view>
其中,testKA对应某个组件的name:
export default { name:'testKA',// keep-alive中include属性匹配组件name data() {return {}}, activated() { // keepalive缓存的页面每次进入都会进行的生命周期 }, }
此外,include用法还有如下:
<!-- 逗号分隔字符串 --> <keep-alive include="a,b"> <component :is="view"></component> </keep-alive> <!-- 正则表达式 (使用 `v-bind`) --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- 数组 (使用 `v-bind`) --> <keep-alive :include="['a', 'b']"> <component :is="view"></component> </keep-alive>
exclude用法与include用法相同,代表不被缓存的组件。
5.部分页面过来需要缓存,部分页面过来需要刷新
描述:如有a,b,c三个页面,a->b时,b刷新页面,然后b->c,c->b时,b不刷新页面,再b->a,a->b时,b刷新页面。
自测,只有配合vuex才能实现,但是缺点是,页面缓存的时候不执行activated()方法
6.缓存只在一级路由生效
如果需要在二级路由使用缓存,可以在一级路由中进行同样的配置
store.js代码:
state: { keepAlives:[] }, mutations: { SET_KEEP_ALIVE(state,params) { state.keepAlives = params } }, getters:{ keepAlive:function(state){ return state.keepAlives } }
App.vue代码:
<template> <div id="nav"> <router-link to="/bbb">BBB</router-link> | <router-link to="/home">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view v-slot="{ Component }"> <keep-alive :include="keepAlive"> <component :is="Component"/> </keep-alive> </router-view> </template> <script> export default{ computed:{ keepAlive(){ return this.$store.getters.keepAlive } } } </script>
Home.vue代码:
// 使用组件内守卫,对离开页面事件做一些操作 // to为即将跳转的路由,from为上一个页面路由 beforeRouteEnter(to, from, next) { next(vm=>{ if(from.path == "/bbb"){ vm.$store.commit("SET_KEEP_ALIVE",["Home"]) } }); }, beforeRouteLeave(to, from, next) { if (to.path == "/about") { console.log("将要跳转/about页面...") } else { console.log("将要跳转非/about页面...") this.$store.commit("SET_KEEP_ALIVE",[]) } // 路由继续跳转 next(); }
效果:
总结
到此这篇关于vue3缓存页面keep-alive及路由统一处理的文章就介绍到这了,更多相关vue3缓存页面keep-alive内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了c#自带缓存使用方法,包括获取数据缓存、设置数据缓存、移除指定数据缓存等方法,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了IDEA中的clean,清除项目缓存图文教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-25
- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 这篇文章主要给大家介绍了关于iOS蓝牙设备名称缓存问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-08
- 今天将从 Vue 的入口文件开始,看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里,感兴趣的小伙伴不要错过奥...2021-09-25
- 这篇文章主要介绍了AngularJS实现Model缓存的方式,分享了多种AngularJS实现Model缓存的方法,感兴趣的小伙伴们可以参考一下...2016-02-05
- 这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-04
- 源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07
- 这篇文章主要介绍了Vue3中的三种函数,分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍,有需要的朋友可以借鉴参考下...2021-09-24
- 这篇文章主要介绍了@CacheEvict + redis实现批量删除缓存方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-10-12
- 本文给大家一起探讨nodejs下dns的缓存问题,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧...2016-11-22
- 在本篇文章里小编给大家整理的是一篇关于python删除缓存文件方法,需要的朋友们可以学习下。...2020-07-19
vue中keep-alive、activated的探讨和使用详解
这篇文章主要介绍了vue中keep-alive、activated的探讨和使用详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-26- 这篇文章主要介绍了IIS7、iis7.5中禁止缓存单个静态文件的配置方法,需要的朋友可以参考下...2017-07-06
- 这篇文章主要介绍了vue项目中禁用浏览器缓存配置案例,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下...2021-09-12
- 页面不缓存可以让我们有更新就立即更新出来用户不需要清除浏览器缓存或不停的按f5刷新了,这里整理了解一些关于页面不缓存的方法,具体的如下。 一,js,css,图片文件不...2016-09-20
- 小编给大家带来一篇关于安卓手机缓存怎么清理的问题解答,有需要的可以参考一下   安卓手机怎么清理缓存 android清除程序缓存的方法  一,...2017-07-06
- 这篇文章主要介绍利用Vue3 创建Vue CLI 项目,下面文章内容附有官方文档链接,安装过程,需要的可以参考一下...2021-10-18
- 这篇文章主要给大家分享的是Vue3的几个优势,Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化,下面我们一起进入文章看看具体详情吧...2021-10-26
SpringCache 分布式缓存的实现方法(规避redis解锁的问题)
这篇文章主要介绍了SpringCache 分布式缓存的实现方法(规避redis解锁的问题),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-11-20