做分类信息网站,html5手机网站开发实例,彩虹云商城,整形网站源码一、需求 产品要求#xff1a;Vue移动端项目进入列表页#xff0c;列表页需要刷新#xff0c;而从详情页返回列表页#xff0c;列表页则需要缓存并且还原页面滚动条位置 二、实现思路
1、使用Vue中的keep-alive组件#xff0c;keep-alive提供了路由缓存功能
2、因为我项…一、需求 产品要求Vue移动端项目进入列表页列表页需要刷新而从详情页返回列表页列表页则需要缓存并且还原页面滚动条位置 二、实现思路
1、使用Vue中的keep-alive组件keep-alive提供了路由缓存功能
2、因为我项目只是针对某几个列表页面做缓存我就直接把指定的几个页面单独的做处理即把需要做缓存的页面路由的meta新增了keepAlive属性当keepAlive为true时缓存为false则不缓存从而实现进入列表页列表页需要刷新而从详情页返回列表页列表页则需要保持页面缓存 建议使用keep-alive 的 includes属性来做缓存页面 三、最终效果 四、具体实现
1、app.vue文件修改
templatediv idappkeep-aliverouter-view classRouter v-if$route.meta.keepAlive/router-view/keep-aliverouter-view classRouter v-if!$route.meta.keepAlive/router-view/div
/template2、在动态路由生成后初始化指定缓存页面路由设置meta中keepAlive属性为true 3、单个列表页面的缓存处理详情返回到列表滚动条的位置
beforeRouteLeave(to, from, next) {// console.log(777---, from)this.scroll document.querySelector(.endInfo).scrollTop// 离开页面时需要清除缓存为了下次进入后刷新页面from.meta.keepAlive falsenext()},activated() {// 注意endInfo类是列表box的顶级类用来计算滚动条的距离document.querySelector(.endInfo).scrollTop this.scrollconsole.log(缓存页面距离, this.scroll)},4、从详情页面返回到列表需要如下设置关键步骤
beforeRouteLeave(to, from, next) {console.log(支付单详情页, to)// 设置下一个路由的meta,让列表页面缓存,即不刷新即此详情页面返回到sell和customerMangement页面后此页面缓存if (to?.path?.includes(sell) || to?.name?.includes(customerMangement)) {to.meta.keepAlive true}next()},五、缺陷按此方法缓存页面会出现列表新增数据后进入详情在返回到列表时之前新增的数据没有即还是上一次的缓存列表数据
六、解决方法在离开列表页面就手动清除keep-alive缓存
1、在app.vue页面加上clearKeepAlive方法并使用EventBus全局监听 解释this.$bus就是在main.js 加上Vue.prototype.$bus new Vue() templatediv idappkeep-aliverouter-view classRouter v-if$route.meta.keepAlive :keyfullPath/router-view/keep-aliverouter-view classRouter v-if!$route.meta.keepAlive/router-view/div
/templatescript
export default {name: app,computed: {fullPath() {// console.log(this.$route.fullPath);return this.$route.fullPath;},},mounted() {console.log(app---mounted)// 注册监听全局的clearKeepAlive方法,可在其他组件中触发此方法this.$bus.$on(clearKeepAlive, this.clearKeepAlive);},methods: {// 根据fullUrl清除keepAliveclearKeepAlive(fullUrl) {// console.log(bus触发要清除的keepAlive, fullUrl);this.$children.forEach((item) {if (item.$vnode.data.key fullUrl) {// console.log(destorykeepAlive, item.$vnode.data.key, fullUrl, item);this.destorykeepAlive(item);}});},// 封装清除某个组件的keepAlive状态,并销毁destorykeepAlive(keepAliveDom) {if (keepAliveDom?.$vnode?.data?.keepAlive) {if (keepAliveDom?.$vnode?.parent?.componentInstance?.cache) {if (keepAliveDom.$vnode.componentOptions) {var key keepAliveDom.$vnode.key null? keepAliveDom.$vnode.componentOptions.Ctor.cid (keepAliveDom.$vnode.componentOptions.tag? ::${keepAliveDom.$vnode.componentOptions.tag}: ): keepAliveDom.$vnode.key;var cache keepAliveDom.$vnode.parent.componentInstance.cache;var keys keepAliveDom.$vnode.parent.componentInstance.keys;if (cache[key]) {if (keys.length) {var index keys.indexOf(key);if (index -1) {keys.splice(index, 1);}}delete cache[key];}}}}keepAliveDom.$destroy();}
}
/script2、单个列表页面使用 beforeRouteLeave(to, from, next) {if (to.name ! 列表进入的详情页面name) {// 离开列表页面的时候当不是进入列表详情页面时清除列表页面的缓存this.$bus.$emit(clearKeepAlive, from.path)}next()},相关文章
基于ElementUi再次封装基础组件文档 基于ant-design-vue再次封装基础组件文档 vue3ts基于Element-plus再次封装基础组件文档
