Vue项目中实现改变屏幕尺寸重新刷新页面-计算页面尺寸

 效果

---

在app.vue中设置 

方式一

<template>
  <div id="app">
      <router-view />
  </div>
</template>
<script>
export default {
  name: "App",
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {
    //窗口尺寸改变
    window.onresize = () => {
      return (() => {
        // this.$forceUpdate();//强制更新数据
        this.$router.go(0);
      })();
    };
  },
  methods: {},
  destroyed() {
    // 销毁
    window.onresize = null;
  },
};
</script>

多次使用window.onresize，会造成其他的失效

方式二

<template>
  <div id="app">
      <router-view />
  </div>
</template>
<script>
export default {
  name: "App",
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {
    //窗口尺寸改变
    window.addEventListener("resize", () => this.Refresh());
  },
  methods: {
	Refresh() {
      this.$router.go(0);
    },
  },
  destroyed() {
    // 销毁
    window.removeEventListener("resize", this.Refresh());
  },
};
</script>