vue项目页面缓存,全局刷新,点击进入子组件刷新

vue 专栏收录该内容
56 篇文章 2 订阅

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

想了解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过期给提示,当该页面重复调用多个接口时,就会给多个重复提示,如何解决该重复提示的问题?

定义一个全局变量:

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

  • 2
    点赞
  • 1
    评论
  • 13
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

评论 1 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:精致技术 设计师:CSDN官方博客 返回首页

打赏作者

过往深处少年蓝

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值