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中有asyncData，运行beforeCreate()，即可以在组件挂载前从asyncData的服务器端获取数据。

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

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

---

编辑

https://stackoverflow.com/a/53058870/2312051

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

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

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

Answer 2

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

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

$navigated 的值是 undefined 或 true，因此我在布局子组件中知道是否可以自动播放视频。