NuxtJS/VueJS：如何知道页面是否仅在客户端呈现？

Question

目前我为通用的 nuxtjs/vuejs 应用程序创建了一个 html5 视频播放器组件。视频标签有一个自动播放属性，可以在导航到视频后启动视频。通常浏览器不会在页面加载后直接执行此操作，这是被禁止的。我需要在我的组件中使用一个变量来了解自动播放是否可以根据此信息对元素进行样式设置。换句话说：如果当前页面仅在客户端呈现，则该变量应为 true，如果首先在服务器端呈现，则该变量应为 false。

无法使用“window.history.length”，因为刷新后也无法自动播放，尽管这不会影响历史长度。

此外，无法在“created”方法中设置变量，因为它也会在服务器端和客户端被调用。

Answer 1

在 nuxt - 有一个<client-only>组件只在客户端呈现组件

<template>
  <div>
    <sidebar />
    <client-only placeholder="Loading...">
      <!-- this component will only be rendered on client-side -->
      <comments />
    </client-only>
  </div>
</template>

在nuxt中，有asyncDatawhich is run beforeCreate()，即您可以在asyncData安装组件之前从服务器端检索数据。

或者，您可以检查created()进程，例如

created() {
  if (process.client) {
    // handle client side
  }
}

编辑

/sf/answers/3714120931/

Audio.play() 返回一个 Promise，它在播放成功开始时被解析。由于任何原因（例如权限问题）未能开始播放，都会导致承诺被拒绝。

const playedPromise = video.play();
if (playedPromise) {
  playedPromise.catch((e) => {
    if (e.name === 'NotAllowedError' ||
        e.name === 'NotSupportedError') {
        //console.log(e.name);
    }
  });
}

在您的情况下，您的浏览器/操作系统似乎不允许自动播放音频。用户代理（浏览器）或操作系统不允许在当前上下文或情况下播放媒体。例如，如果浏览器要求用户通过单击“播放”按钮显式开始媒体播放，则可能会发生这种情况。这是参考。

Answer 2

一种可能的解决方案是获取 Vue 路由器条目的长度。目前，如果不手动跟踪，这似乎是不可能的。所以我在布局组件中使用了以下代码：

watch: {
  $route () {
    Vue.prototype.$navigated = true
  }
}

$naviged 的​​值未定义或为 true，因此我知道布局子组件中视频是否可以自动播放。