移动端切换路由后返回，视频启动播放会严重滞后，好怪？

Question

路由a和路由b，其中路由a有一个视频。
● 从路由a进入路由b，再返回路由a，调用视频play方法，视频会缓冲状态一会，才会播放。
● 从路由a进入路由b，刷新b路由，再返回路由a，调用视频play方法，视频会立即播放。
● 在b路由中刷新，调用视频play方法，视频会立即播放。

诡异的很！

Answer 1

最终的解决方案如下，个种原因还不得而知：

import { onBeforeUnmount } from "vue"

// 在视频元素所在路由页面添加如下代码
onBeforeUnmount(() => {
  // 解决从其它路由进入当前页面后，视频无法立即播放的问题
  if (videoRef.value) {
    videoRef.value.src = ""
  }
})

Answer 2

与 Vue.js 的路由缓存机制和视频元素的加载状态有关。以下是一些可能的解决方案：
1.使用 keep-alive： 确保在路由切换时保持组件的状态。你可以在路由配置中使用 keep-alive 包裹需要缓存的组件。

<template>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</template>

2.手动控制视频的加载： 在路由切换时手动控制视频的加载和播放状态。你可以在 beforeRouteLeave 和 beforeRouteEnter 钩子中处理视频的加载逻辑。
JavaScript

beforeRouteLeave (to, from, next) {
  const video = this.$refs.video;
  if (video) {
    video.pause();
  }
  next();
},
beforeRouteEnter (to, from, next) {
  next(vm => {
    const video = vm.$refs.video;
    if (video) {
      video.load();
      video.play();
    }
  });
}

3.使用 v-if 控制视频元素的渲染： 通过 v-if 控制视频元素的渲染，确保在路由切换时重新加载视频。

<template>
  <div v-if="showVideo">
    <video ref="video" src="your-video-url.mp4"></video>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showVideo: true
    };
  },
  watch: {
    $route(to, from) {
      if (from.name === 'routeB' && to.name === 'routeA') {
        this.showVideo = false;
        this.$nextTick(() => {
          this.showVideo = true;
        });
      }
    }
  }
};
</script>

推荐使用 keep-alive 方案，因为它可以在路由切换时保持组件的状态，避免重新加载视频，从而减少缓冲时间。这种方法简单且高效，适用于大多数情况。如果你需要更精细的控制，可以结合 手动控制视频的加载 和 v-if 控制视频元素的渲染 的方法，根据具体需求进行调整。