NuxtJS/VueJS：如何知道页面是否只在客户端呈现？ [英] NuxtJS/VueJS: How to know if page was rendered on client-side only?

问题描述

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

无法使用"window.History y.length"，因为刷新后也不能自动播放，尽管这不会影响历史记录长度。

此外，无法在"Created"方法中设置变量，因为它也将在服务器端和客户端被调用。

推荐答案

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

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

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

这篇关于NuxtJS/VueJS：如何知道页面是否只在客户端呈现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！