如何在 Nuxt.js 中使用 <keep-alive>？答案

【问题标题】：How can I use <keep-alive> in Nuxt.js?如何在 Nuxt.js 中使用 <keep-alive>？
【发布时间】：2019-08-16 22:45:56
【问题描述】：

我在我的 Nuxt.js 项目中使用 Video.js，但是当我更改应用程序的视图时，我不希望视频从头开始重新开始。因此，最好使用标签上的标签。

【问题讨论】：

你的问题是什么？
Vue 使用 keepAlive 标志来缓存对象——我不确定你是否可以简单地期望它嵌入到 vue 逻辑中——但是对代码库的快速概述让我们假设它应该可以适应这个在保持逻辑的同时进入 vue - 另一个想法是制作某种嵌入组件
唯一的解决方案是存储video元素的当前时间，并在再次渲染视图时重新设置。

【解决方案1】：

布局/default.vue

<template>
  <nuxt keep-alive/>
</template>

参考资料：

【讨论】：

【解决方案2】：

对于那些想要传递 props 来保持活力的人来说，这样的事情应该可以解决问题：

<template>
    <nuxt keep-alive :keep-alive-props="{include: ['name_of_component']}" />
</template>

【讨论】：

根据我的经验，只有页面组件适用于包含数组。此外，您必须指定页面的完整路径。像这样的东西对我有用：<nuxt keep-alive :keep-alive-props="{include: ['pages/mypage.vue']}" />