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

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

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

一、页面缓存

找到页面的内容区，即系统放页面的区域：

路由文件配置：

 二、全局页面刷新

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

方式一：（注意：页面一定不能设置缓存，设置缓存则没用）

刷新按钮函数：

        // 页面刷新
        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过期给提示，当该页面重复调用多个接口时，就会给多个重复提示，如何解决该重复提示的问题？

定义一个全局变量：

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