小编okw*_*wme的帖子

我将 vue-router 与一系列组件（如选项卡）一起使用。每个<router-link>都是一个选项卡，下面的空间是<router-view>. 其中两个选项卡是具有不同过滤器的相同组件，假设它们是products并且路由器添加了用于过滤的参数：/products/new& /products/sale。

里面products是单独的product组件，当路由打开时它们会被安装。我的问题是，当我在路由之间切换并且更改过滤器参数时，product每次都会重新安装组件。我想缓存它们，以便来回切换更容易。为此，我设置<keep-alive>并添加:key='$route.fullPath'到我的<router-view>但它们似乎没有被缓存。每个product仍烧成mounted()事件，当我之间进行切换products。

<keep-alive>
  <router-view :key='$route.fullPath'></router-view>
</keep-alive>

我应该将每个products视图变成一个单独的组件吗？

移动设备无法自动播放视频或音频似乎是一个常见的抱怨。根据苹果开发者库的说法，它被故意禁用：

在 iOS 上的 Safari（适用于所有设备，包括 iPad）中，用户可能使用蜂窝网络并按数据单位付费，预加载和自动播放被禁用。在用户启动之前不会加载任何数据。这意味着 JavaScript play() 和 load() 方法在用户启动播放之前也处于非活动状态，除非 play() 或 load() 方法是由用户操作触发的。换句话说，用户启动的“播放”按钮可以工作，但 onLoad="play()" 事件则不能。

允许的是直接用户操作来触发播放事件。我的问题是，我有视频缩略图，单击时会在其位置加载视频元素，并且加载后需要播放。在移动设备上，用户必须单击两次才能播放视频，这不太好。我很沮丧，因为我的用户实际上正在触发播放操作，但其间还发生了一些其他事件。我开始测试不同的用户触发事件，以了解苹果所谓的“直接用户操作”的范围或限制。

我发现这段代码触发了播放事件：

$(".clickElement").click(function(){
    $("video").get(0).play();
});

虽然这没有：

$(".clickElement").click(function(){
    setTimeout(function(){
        $("video").get(0).play();
    },0);
});

对于不同的超时持续时间以及使用 setInterval 时，情况也是如此。

我的问题是苹果如何定义直接用户操作？显然超时和间隔还不够直接。有没有办法让我“直接”从用户触发播放事件，并允许我的视频元素有足够的时间进入页面？