vue 路由页面缓存

VUE框架真的很神奇，神奇到好多坑你都要填

这次说说VUE里缓存页面的问题

现在前端做APP的话，估计很少人会直接去用VUE cli来写，因为那样特别麻烦，你得配置很多东西。填很多坑！现在如果要求前端H5来做个APP，估计大家很多都会选择uniapp，MUI等这些主流框架，一套代码适配多端，很方便。

接下来就说说，vue cli做APP遇到的问题，页面缓存

因为总会要做到A-B，B选择完或者处理完业务返回到A，大家都知道，VUE默认是会销毁页面的，就是一般情况下，A->B页面，C回B页面后，A其实已经重新刷新渲染了，你之前填写的数据就会没了，但是我们需要的是我在A页面填写完东西，在不请求保存接口都时候我要留着数据在页面，还需要去B页面拿取一些数据返回A显示。这时候就要做到页面缓存了。

刚开始我用的仅仅是判断keep-alive

 <div id="app"><keep-alive><router-view v-if='$route.meta.keepAlive' class="view"></router-view></keep-alive><router-view v-if='!$route.meta.keepAlive' class="view"></router-view>
</div>

然后再去缓存的页面判断

//路由守卫判断前进后退是否保存
beforeRouteLeave(to, from, next) {if (to.path == "/B") {from.meta.keepAlive = true;}else{from.meta.keepAlive = false;}next();
},

最后发现这样的方式虽然简单，但是容易出bug，就是我返回的时候其实他这个页面并没有清除缓存，当你再次进入缓存的B页面，再进入下一个C页面返回的时候，B页面就会把上一次的东西带出来了，相当于，把上一次的缓存拿过来了，这样的方式很不好，最后查阅资料，发现还是用vuex加include好用，并且没有什么bug，缓存点设置和清除都很好
下面是代码

//-------router.js----------//在你配置路由的页面，设置好keepAlive和index{path:'/A',name:'A',components:Home,meta:{keepAlive:true //需要被缓存的组件index:1       //下标，标识},{path:'/B',name:'B',components:Book,meta:{keepAlive:false, //不需要被缓存的组件index:2      }

 //----App.vue------//在app.vue里面，在keep-alive里加入include，可以看看vue官网keep-alive的说明文档<div id="app"><keep-alive :include="keepAlive"><router-view class="view"></router-view></keep-alive></div>js部分加入computed: {keepAlive() {return this.$store.getters.keepAlive    //将页面存入vuex}},

//vuex里面加入keepalive相关import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {keepAlive: []},mutations: {setKeepAlive: (state, keepAlive) => {state.keepAlive = keepAlive}},getters: {keepAlive: state => state.keepAlive}
})export default store//main.js引入这个js文件

接下来就是处理缓存页面和清除缓存了

//在A页面用路由守卫处理
beforeRouteLeave(to, from, next) {if(to.name.indexOf('A') > -1) {this.$store.commit('setKeepAlive', [])   //清除缓存}else{this.$store.commit('setKeepAlive', ['B']);  //设置缓存}next()
},

这样就可以实现页面缓存的效果了，
如果有人不起作用，你一定要看看你缓存的那个页面，有没有加name=“B”，因为include认的是页面的name,必须保持一致

还有人可能想问，A->B->C，我想B缓存，B去C处理业务缓存B，B返回A清空缓存，怎么弄？
其实一样的，只需要在A页面的跳转B页面的方法里加上

//把B页面缓存起来
this.$store.commit('setKeepAlive', ['B'])

然后缓存B的方法跟上面缓存A的一样就行；

如果有错误的地方，欢迎指正。

vue 路由页面缓存相关推荐

vue tab页面缓存处理
vue tab页面缓存处理问题:使用vant 框架.底部导航切换,tab页面缓存解决: 1.index 页面 xml 设置 <keep-alive><router-view v- ...
vue 删除页面缓存_vue项目强制清除页面缓存的例子
异常描述: 支付宝中内嵌h5项目(vue框架开发),前端重新打包上传之后访问页面会导致页面空白.页面tab点击异常之类异常情况,需要手动清除支付宝缓存才可以正常访问. 解决方案: 在HTTP协议中,只 ...
【vue】页面缓存回跳后侧边栏z-index层级导致页面快闪
问题描述公司使用的帆软报表页面没有加keepAlive缓存,在从一个弹框页面跳转到子报表后,切换路由回到当前页面是会继续展示弹框页面,但是页面由于z-index层级问题会闪一下. 问题排查经过代码 ...
vue中页面缓存后destroyed失效，如何关闭定时器
场景页面中设置了定时器,如果组件销毁是没有关闭定时器,他还会一直执行,会非常耗性能,所以需要及时关闭定时器. 关闭定时器 vue项目中,正常情况下,我们在生命周期 destroyed 中关闭即可,一 ...
vue切换路由页面数据缓存_Vue-Router实现前端页面缓存
一.使用情景在使用Vue开发单页面应用时,我们通常会使用Vue-Router进行页面导航,Vue-Router在进行路由切换的时候,页面是会重新加载,对应的生命周期函数也会再次执行一遍,但是在有些业 ...
Vue路由开启keep-alive缓存页面
mode:hash模式下: HTML部分: <template><div id="app"><keep-alive> <!--使用keep ...
keep-alive的深入理解与使用(配合router-view缓存整个路由页面)
原文来自: http://blog.myweb.kim/vue/keep-alive/?utm-source=origin 转载请注明出处. 在搭建 vue 项目时,有某些组件没必要多次渲染,所以需要 ...
ios 销毁当前页面重新开启_利用Vue中keep-alive，快速实现页面缓存
keep-alive 有时候我们不希望组件被重新渲染影响使用体验:或者处于性能考虑,避免多次重复渲染降低性能.而是希望组件可以缓存下来,维持当前的状态.这时候就可以用到keep-alive组件. 官网 ...
vue index.html 缓存,解决vue单页面回退页面 keeplive 缓存问题
场景:项目中遇到 vue 点击回退从A页跳到B页,缓存A页,当B页状态修改再次返回A时,A页查询条件缓存不刷新,列表刷新 A页: B页: 解决方法: 利用keep-alive 缓存需要缓存的页面 1 ...

vue 路由页面缓存

vue 路由页面缓存相关推荐

最新文章

热门文章