【vue】刷新页面

  1. 刷新页面出现白屏

方法一(通过js原始方法刷新)
location.reload()

方法二(通过Vue自带的路由进行跳转)
this.$router.go(0)

2、刷新页面不会出现白屏

App.vue

<template>
  <div id="app">
    <router-view v-if="isRresh"></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    isRresh: true,
  }),
  provide() {
    return {
      refresh: this.refresh,
    };
  },
  methods: {
    refresh() {
      this.isRresh = false;
      this.$nextTick(() => {
        this.isRresh = true;
      });
    },
  },
};
</script>

使用页面

<template>
  <div>
    <el-button @click="goitem()" >跳转页面</el-button>
  </div>
</template>

<script>
export default {
  inject: ["refresh"], //子组件接受值
  methods: {
    goitem() {
      this.$router.push("/process");
      this.refresh();
    },
  },
};
</script>

猜你喜欢

转载自blog.csdn.net/Qxn530/article/details/129692532