Vue返回上一页怎么实时刷新

一、window.history.go()方法刷新上一页

使用window.history.go()方法可以实现返回上一页并且实时刷新页面。这个方法是HTML5新增的API之一，可以让我们控制浏览器的历史纪录，以及前进和后退的效果。在Vue中，我们可以通过监听路由的变化来实现页面的刷新。下面是示例代码：

  
    // 监听路由
    watch: {
      $route(to, from) {
        if(from.path === '/previousPage') {
          window.history.go(0);
        }
      }
    }

二、使用Bus实现

除了使用window.history.go()方法，我们还可以使用Bus来实现页面的刷新。在父组件中注册一个Bus，子组件就可以通过emit来触发父组件中的方法，然后在方法中刷新页面。下面是示例代码：

  
    // 父组件
    
   

    <script>
      import EventBus from '@/plugins/EventBus.js'
      export default {
        methods: {
          refreshPage() {
            window.location.reload();
          }
        },
        mounted() {
          EventBus.$on('refresh', () => {
            this.refreshPage();
          });
        }
      }
    </script>

    // 子组件
    
   

    <script>
      import EventBus from '@/plugins/EventBus.js'
      export default {
        methods: {
          refreshPage() {
            EventBus.$emit('refresh');
          }
        }
      }
    </script>

三、使用meta标签禁用缓存

我们还可以通过使用meta标签来禁用缓存，每次访问页面都会重新加载，达到刷新的效果。下面是示例代码：

  
    
   

    <script>
      export default {
        methods: {
          goBack() {
            window.history.go(-1);
          }
        },
        mounted() {
          // 禁用缓存
          let head = document.getElementsByTagName('head')[0];
          let meta = document.createElement('meta');
          meta.setAttribute('http-equiv', 'Cache-Control');
          meta.setAttribute('content', 'no-cache, no-store, must-revalidate');
          meta.setAttribute('pragma', 'no-cache');
          meta.setAttribute('expires', '0');
          head.appendChild(meta);
        }
      }
    </script>

四、使用location.reload()方法刷新

最后一种方法是使用location.reload()方法来实现页面的实时刷新。这个方法会重新加载当前页面，如果我们需要刷新上一页，就需要在返回上一页后再次使用location.reload()方法。示例代码如下：

  
    
   

    <script>
      export default {
        methods: {
          goBack() {
            window.history.go(-1);
            location.reload();
          }
        }
      }
    </script>