vue使用fullscreen实现全屏并且切换页面的时候保存全屏状态

在Vue中，要实现元素的全屏功能并保持全屏状态在页面切换时依然生效，你可以使用HTML5的全屏API。首先，在需要支持全屏的组件中添加一个按钮或者事件监听器，通过JavaScript控制元素进入全屏模式：

<button @click="enterFullScreen">点击进入全屏</button>
<div id="yourElement" ref="fullScreenElement"></div>

<script>
export default {
  methods: {
    enterFullScreen() {
      this.$refs.fullScreenElement.requestFullscreen();
    },
    // 判断是否处于全屏模式
    isFullScreen() {
      return document.fullscreenElement === this.$refs.fullScreenElement ||
             document.mozFullScreenElement === this.$refs.fullScreenElement ||
             document.webkitFullscreenElement === this.$refs.fullScreenElement;
    },
    // 退出全屏
    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
    beforeRouteLeave(to, from, next) {
      if (this.isFullScreen()) {
        this.exitFullScreen();
      }
      next(); // 按照正常流程离开当前页面
    }
  }
};
</script>

在`beforeRouteLeave`钩子中，检查当前是否处于全屏状态，并在确认的情况下调用`exitFullScreen()`方法，然后允许页面切换。