精华内容
下载资源
问答
  • 使用keep-alive属性包裹需要缓存页面使用v-if判断,为true的是需要缓存的,false是需要缓存的 第三步 在需要缓存页面设置导航钩子,在A野区离开时将值设置为false保证离开当前野区被偷 第四步 在其他野区...
  • 主要介绍了Vue利用localStorage本地缓存使页面刷新验证码清零功能的实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 今天小编就为大家分享一篇vue项目强制清除页面缓存的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 实现场景:在页面中我们要实现每个页面自己能控制是否缓存,...-- 是否缓存页面:即每次进入页面是否刷新,若缓存则无法手动刷新页面 --> <router-view v-if="$route.meta.keepAlive&&isRouterViewShow

    实现场景:在页面中我们要实现每个页面自己能控制是否缓存,即是否每次进入页面是否需要刷新页面,每个页面有不同的需求,并且在全局有一个按钮能在每个当前页面按这个按钮都可以刷新。另外一个场景就是父子组件时,如在父组件有一个弹出层的子组件,我们希望每次弹出层时刷新数据,该怎么做?

    想了解vue各种组件的通信方式可以看:详解vue中的组件通信的几种方式,父子组件通信,兄弟组件通信,父组件触发子组件事件(一)_花落微凉梦清幽的博客-CSDN博客

    一、页面缓存

    找到页面的内容区,即系统放页面的区域:

    <keep-alive>
     <!-- 是否缓存页面:即每次进入页面是否刷新,若缓存则无法手动刷新页面 -->
     <router-view v-if="$route.meta.keepAlive&&isRouterViewShow"></router-view>
    </keep-alive>
      <!-- 不缓存 -->
     <router-view v-if="!$route.meta.keepAlive&&isRouterViewShow"></router-view>

    路由文件配置:

     二、全局页面刷新

    在全局做了页面刷新,我们就不需要在每个页面单独做刷新了,提供两种解决方式:一种是刷新路由视图的方式,一种是在全局调用每个页面的刷新页面的接口

    方式一:(注意:页面一定不能设置缓存,设置缓存则没用)

    <!-- 不缓存 -->
    <router-view v-if="!$route.meta.keepAlive&&isRouterViewShow"></router-view>

    刷新按钮函数:

            // 页面刷新
            refresh() {
                console.log('当前路由', this.$route.name)
                /** 控制路由隐藏与显示办法刷新每个模块的数据,但是在路由设置了允许缓存后该方法不起作用 */
                // 先隐藏
                this.isRouterViewShow = false
                // $nextTick() 将回调延迟到下次 DOM 更新循环之后执行
                this.$nextTick(() => {
                    this.isRouterViewShow = true
                 })
            },

    方式二:

    用兄弟组件的通信方式,去触发每个兄弟组件的刷新函数,这种方式就不涉及到刷新路由,只是刷新渲染页面的获取数据的函数,则可以设置缓存与不缓存

    先main.j是定义vue实例:

    // 创建vue空实例
    let hub = new Vue()
    Vue.prototype.$eventhande = hub // 加入vue原型中,让所有组件可以访问到该对象

    刷新按钮:

           // 页面刷新
            refresh() {
                console.log('当前路由', this.$route.name)
                // 触发自定义事件refresh,刷新每个模块的数据
                this.$eventhande.$emit('refresh', this.$route.name)
            },

    每个页面的刷新页面:

    注意:要传入每个当前页面的路由名称,然后判断只刷新当前页面,不然点击刷新,会触发所有页面兄弟组件的刷新事件,我们只想刷新当前打开页面而已

    该监听函数在created生命周期中写就好了

            // 监听兄弟组件的自定义事件,并接受传入的值
            this.$eventhande.$on('refresh', (val) => {
                // 只刷新当前页面
                if (val === 'MaterialManage') {
                    this.refresh()
                }
            })        

    三、子组件刷新 

    父组件有一个弹出层的子组件,每次进入都刷新数据,为什么要这样?我们通常的操作就是加载子组件时刷新数据,就是在created生命周期中获取数据,但是加载子组件是打开父页面时就加载了,而这样导致修改了数据时,弹出层的数据没法及时更新,所以需要点击进入就获取新的数据

    方案一:用父组件触发子组件事件方法刷新数据

    父组件:

    绑定ref,触发子组件事件

    this.$refs.processLog.$emit('bridge')

    子组件:

    mounted() {
            // 每次点击进来刷新页面,在created调用刷新数据接口是加载父组件就会调用
            this.$on('bridge', (val) => {
                this.getFlowData()
            })
        },

    还有一个要注意的就是:页面只第一次进入刷新,后面进入不刷新,自己是不是设置了页面缓存keepAlive

    方案二:用watch去监听该值有没有变化,有变化则去调用刷新接口

    props: {
            type: String,
            processId: Number
        },
        watch: {
            type(newval, oldval) {
                this.type = newval
                // 根据type的变化调用刷新接口
                this.queryCopyInfo()
            },
            processId(newval, oldval) {
                this.processId = newval
                // 返回值:state,1:已处理节点,2:当前节点,3:未处理节点
                this.queryProcessLogInfo()
            }
        },

    四、解决页面重复提示问题

    问题描述:当我们要判断token过期,重新登入时,会在token过期给提示,当该页面重复调用多个接口时,就会给多个重复提示,如何解决该重复提示的问题?

    定义一个全局变量:

     在响应拦截器中设置该值,这样就能保证只弹出一次过期提示:

    展开全文
  • 用到这个的业务场景是这样的: a页面点击新建列表按钮进入到新建的页面b,填写b页面并点击b页面确认添加按钮,把这些数据带...用本地存储的时候,如果加回退也会吧之前存的历史记录给带过来,所以最终选用了第三种方
  • vue 缓存页面不刷新

    2021-06-25 16:28:07
    让路由的name以及vue页面的name相同 user.js: newUser.vue:

    让路由的name以及vue页面的name相同
    user.js:
    在这里插入图片描述
    newUser.vue:
    在这里插入图片描述

    展开全文
  • *思路是从C进入B,缓存B,其他页面进入B,不缓存 B页面: beforeRouteLeave(to, from, next) { from.meta.keeplive= false; next(); }, activated(){ //根据$route.meta }, C页面 // 返回上一页路由不刷新问题...

    需求:A进入B,根据不同id刷新B页面数据,B进入C,C返回B,如果C有操作数据,则返回B后刷新B数据,否则B页面不刷新;
    在这里插入图片描述
    第一次尝试
    *思路是从C进入B,缓存B,其他页面进入B,不缓存

    B页面:

    beforeRouteLeave(to, from, next) {
      from.meta.keeplive= false;
      next();
    },
    activated(){  
        //根据$route.meta
    },
    

    C页面

      // 返回上一页路由不刷新问题
      beforeRouteLeave (to, from, next) {
          to.meta.type=this.showChange;
          to.meta.keeplive = true;
             if(this.edit){
               to.meta.isrefer=true;//编辑成功后刷新B页面的数据,状态码
             }else{
             to.meta.isrefer=false;
             }
        next();
      },
    

    理论上没毛病啊,可是问题来了
    第一次,A进B,B进C,C返回B,缓存了B

    第二次,A进B,B会刷新,B再进C,C再返回B,B的数据是第一次进入B的时候的数据

    原因:因为B的页面参数还是第一次缓存的时候的参数,所以,无论怎么重新加载数据,数据还是原来第一进入的B的数据,因为请求的参数从来没有改变。

    解决方案一

    A页面

    	beforeRouteLeave (to, from, next) { 
    				  to.meta.isrefer = true;//刷新B的数据
    				  to.meta.type=false;
        			next();
      	},
    

    B页面

      beforeRouteEnter(to, from, next){
          to.meta.keeplive= true;
           next(vm=>{
           //这里把页面初始值重新赋值,以刷新页面
           if(vm.$route.meta.isrefer){
            vm.dataList=[];
            vm.$route.meta.isrefer=false;//恢复初始值
            vm.seatList=[]
            vm.query={
                     activityId: vm.$route.query.activityId,
                     meetplaceId: vm.$route.query.meetplaceId,
            }
            vm.getSeatImgList()//请求数据
          }
        })
      },
    beforeRouteLeave(to, from, next) {
      from.meta.keeplive= true;//每次进入页面都缓存B
      next();
    },
    

    C页面与上面不变

    App.vue

    	<router-view v-if="$route.meta.keeplive"></router-view>
    	</keep-alive>
    	<router-view v-if="!$route.meta.keeplive"></router-view>
    

    解决方案二(利用provide和inject)

    1、app.vue页面

    	<keep-alive v-if="isRouterAlive ">
    			<router-view v-if="$route.meta.keeplive"></router-view>
    	</keep-alive>
    	<router-view v-if="!$route.meta.keeplive"></router-view>
    

    data里面加个初始值

    data(){
    	return{
    		isRouterAlive:true
    	}
    }
    

    与data同级加个provide

    provide() { return { reload: this.reload }; },
    

    method加reload方法

    reload() { 
    	this.isRouterAlive = false; 
    	this.$nextTick(() => (this.isRouterAlive = true)); 
    }
    

    2、要缓存的页面

    与data同级加个
    inject: ["reload"]
    

    修改beforeRouterEnter

      beforeRouteEnter(to, from, next){
          to.meta.keeplive= true;
           next(vm=>{
           		vm.reload()//调用app.vue的方法
           }
        }
    

    解决方案三(利用activated)

     activated(){
           //判断参数是否刷新,后更新页面数据
        }
    

    每一次采坑,都是在进步和学习的过程

    展开全文
  • vue里面,有a.b.c三个页面,要达到的效果是从a页面进去b页面,b页面需要刷新,但若从b页面进入c页面了以后再回到b页面,b页面需要保留之前的值,刷新; 第一想到的是:<router-view v-if="$route.meta....

    前端时间项目迭代,其中有个需求

    在vue里面,有a.b.c三个页面,要达到的效果是从a页面进去b页面,b页面需要刷新,但若从b页面进入c页面了以后再回到b页面,b页面需要保留之前的值,不做刷新;

    第一想到的是:<router-view v-if="$route.meta.keepAlive"></router-view> ;但是由于v-if 每次会销毁页面元素,导致第一次是缓存不成功的;在网上也找到过window.reload();这种方法,但是页面会有一瞬间的空白,用户体验不是很好;

    后同事找了一种方法,vuex结合路由守卫可以达到此效果,具体代码如下:

    首先app.vue

    //js
    
    computed: {
    			keepAlive () {
    				return this.$store.getters.keepAlive
    			}
    		},
    
    //html
    <keep-alive  :include='keepAlive'>
    	<router-view></router-view>
    </keep-alive>
    

    vuex 中需要定义keepAlive

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    
    Vue.use(Vuex)
    
    var store = new Vuex.Store({
        // 定义状态
        state: {
        	
            keekAlives:[],
            
        },
        mutations:{  //更改 Vuex 的 store 中的状态
            SET_KEEP_ALIVE:function(state, keekAlives){
               return state.keekAlives = keekAlives;
            }
        },
        getters: {
          keepAlive: function(state){
              return state.keekAlives
        //   keepAlive: state => state.keekAlives
          }
        }
    })
    
    export default store

    最后在需要缓存的页面进行判断

    beforeRouteEnter (to, from, next) {
         next(vm => {
                   if (from.name=="serve") {
                        vm.$store.commit('SET_KEEP_ALIVE', ['addProject'])
                   }
                })
            },
            beforeRouteLeave (to, from, next) {
                if (to.name == "companySearch") {
                   this.$store.commit('SET_KEEP_ALIVE', ['addProject'])
                } else if (to.name=="serve" || to.name=="addSuccess") {
             this.$store.commit('SET_KEEP_ALIVE', []) 
                }
                next()
            },
    

      

    转载于:https://www.cnblogs.com/suiyide/p/10191209.html

    展开全文
  • 场景是列表页有搜索条件后跳入详情页,从详情页返回列表页不刷新。 在列表和详情页设置keepAlive meta:{ title:'详情页', keepAlive:true//此组件需要被缓存 } meta:{ title:'列表', keepAlive:true//此...
  • mounted() { this.enterPage() }, destroyed(){ ...刷新:beforeload+unload+load*/ //离开清除监听 leavePage(){ window.removeEventListener('beforeload', e => this.beforeunloadH...
  • vue页面刷新缓存

    千次阅读 2017-10-31 09:47:00
    vue项目中,有些组件没必要多次渲染,我们需要组件在内存中缓存下来。此时keep-alive就可以派上用场了,keep-alive可以使被包含的组件状态维持不变,即便是组件切换了,其内的状态依旧维持在内存之中。在下一次...
  • 但是发现 beforeDestroy 只能监听到页面间的跳转,无法监听到页面刷新和关闭标签页。 所以还是要借助 onbeforeunload 事件。 顺便复习了一下 JavaScript 中的一些加载,卸载事件: 页面加载时只执行 onload 事件...
  • Vue2.0 页面缓存缓存的方法 1、在app中设置需要缓存的div <keep-alive>//缓存的页面 <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if...
  • 1、index页面 主要代码 <keep-alive :include="keepAliveList"> <router-view class="avue-view" v-if="keepAlive"/> </keep-alive> provide() { return { index: this, routerRefresh: this...
  • vue 页面缓存缓存方法

    千次阅读 2019-06-03 14:38:48
    标签页面缓存 在App.vue 中来判断各个组件是否缓存 <div id="app"> <!--缓存想要缓存的页面,实现后退不刷新--> <!--加上v-if的判断,可以自定义想要缓存的组件,自定义在router里面--> <...
  • } catch (error) { console.log('keepAliveManage:页面刷新失败') } }, created() { this.$store.commit('ADD_KEEPALIVE_PATH', this.$route.fullPath); }, beforeDestroy() { this.$store.commit('REMOVE_...
  • 到现在,接触vue也小段时间了,项目进行到了一定程度,然而项目缺少了缓存机制,所以每次跳转页面都会重新created一下数据,虽说系统的数据请求速度很快,但是这样做对系统的性能会有很大的坏处的,所以到这里就要对...
  • vue页面跳转缓存不刷新

    千次阅读 2020-07-10 10:31:13
    在跳转之前关闭,跳转之后,在刷新函数的里面加入开启缓存(写在最后一行)。 //全局关闭缓存 this.$route.meta.$keepAlive = false; //全局开启缓存 this.$route.meta.$keepAlive = true; 第二种: { path:...
  • 今天我们使用本地缓存localStorage来实现页面刷新了,验证码倒计时还是和刷新时一样,而不是清零,其次我们可以使用localStorage去实现用户信息缓存,记住密码等等关于缓存的功能,在这里就简单演示一下验证码功能。...
  • VUE 页面缓存方法

    2021-01-06 00:54:59
    1、在router中设置需要缓存页面:keepAlive:true 需要缓存 keepAlive:false 需要缓存 { path: '/Wjgl', component: resolve => require(['../components/page/Wjgl/index.vue'], resolve), meta...
  • 项目中遇到了父子两个页面都是缓存的,但是父页面是一个统计页面,点击表格的不同项目会进入到对应的子页面的不同tab列表页,如下: 子列表如下: 我点击了未到件进入到子列表的未到件列表后,点击浏览器返回到...
  • vue3 实现页面缓存 页面返回修改才刷新 首先 在需要判断的页面引入router const router = useRouter() router.beforeResolve((to: any, from: any) => { if (to.params.val == "back") { console.log("不刷新...
  • 1.缓存页面使用场景(点击跳转路由到详情页面,后返回入口页希望数据保持) 2.使用keep-alive 3.首先在app.vue文件中修改 <template> <div id="app"> <keep-alive> <router-view v-if="$...
  • 主要介绍了vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置,本文通过实例代码效果图展示给大家介绍的非常详细,需要的朋友可以参考下
  • 解决方法:缓存上一页的数据,让其在已经存在的情况下,再次显示重新执行生命周期; 模板代码 (分发路由的页面): <!-- 缓存页面 --> <keep-alive> <router-view v-if="$route.meta.keepAlive...
  • IOS系统环境下,从微信的vue页面A中跳转到第三方页面B,然后点击浏览器返回按钮返回A页面。 问题描述: IOS系统下,A页面没有刷新;Android正常刷新。 问题解决: 在A页面mounted中添加如下方法: window.onpageshow...
  • 路由切换返回前一个路由时实现... //如果是page2过来的,表明当前页面不需要刷新获取新数据,直接用之前缓存的数据即可 } next(); } beforeRouteLeave后面的参数to是关于上个页面的信息,to.name就是上个路由名称

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,149
精华内容 5,259
关键字:

vue页面缓存页面不刷新

vue 订阅