实现场景：在页面中我们要实现每个页面自己能控制是否缓存，即是否每次进入页面是否需要刷新页面，每个页面有不同的需求，并且在全局有一个按钮能在每个当前页面按这个按钮都可以刷新。

想了解vue各种组件的通信方式可以看：https://blog.csdn.net/QQ_39009348/article/details/81511981

一、页面缓存

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

<keep-alive>
 <!-- 是否缓存页面：即每次进入页面是否刷新，若缓存则无法手动刷新页面 -->
 <router-view v-if="$route.meta.keepAlive&&isRouterViewShow"></router-view>
</keep-alive>
  <!-- 不缓存 -->
 <router-view v-if="!$route.meta.keepAlive&amp;&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()
            }
        })