vue 刷新页面

LHC087

已于 2022-04-24 11:20:38 修改

阅读量244

点赞数 1

文章标签： vue.js 前端

于 2019-05-24 18:42:58 首次发布

本文链接：https://blog.csdn.net/weixin_43829905/article/details/90516423

版权

本文介绍了Vue.js中实现页面刷新的三种方式：无痕刷新、强制刷新和伪造刷新，详细阐述了每种方法的实现步骤和效果。同时，还展示了如何监听浏览器的刷新事件，以便在刷新时执行特定操作。

摘要由CSDN通过智能技术生成

vue 刷新页面

第一种无痕刷新

先在全局组件注册一个方法，用该方法控制 router-view 的显示与否，然后在子组件调用；
用 v-if 控制的显示；
provide：全局注册方法；
inject：子组件引用 provide 注册的方法；

APP.vue代码

<template>
  <div id="app">
    <!-- 添加v-if判断 -->
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  provide() {
    //注册一个全局的方法
    return {
      reload: this.reload
    };
  },
  data() {
    return {
      isRouterAlive: true
    };
  },
  methods: {
    reload() {
      //刷新页面
      this.isRouterAlive = false;
      this.$nextTick(function() {
        this.isRouterAlive = true;
      });
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: an