vue实现屏幕发生变化 刷新页面

可以使用Vue提供的watch属性来监听屏幕大小的变化，然后在监听函数中调用window.location.reload()方法刷新页面。具体实现如下：

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      screenWidth: null
    }
  },
  mounted() {
    // 初始化屏幕宽度
    this.screenWidth = window.innerWidth
    // 监听屏幕大小变化
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      // 获取新的屏幕宽度
      const newScreenWidth = window.innerWidth
      // 如果屏幕宽度发生变化，刷新页面
      if (newScreenWidth !== this.screenWidth) {
        window.location.reload()
      }
    }
  },
  beforeDestroy() {
    // 移除屏幕大小变化监听器
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>

在mounted钩子函数中，初始化屏幕宽度并添加屏幕大小变化的监听器。当屏幕大小发生变化时，调用handleResize方法判断是否需要刷新页面。在beforeDestroy钩子函数中，移除屏幕大小变化的监听器。