VueJS 和 Keep-Alive：为什么会出现控制台错误？答案

【问题标题】：VueJS and Keep-Alive: Why the console error?VueJS 和 Keep-Alive：为什么会出现控制台错误？
【发布时间】：2020-06-18 03:25:52
【问题描述】：

我有一个名为posts 的视图/页面，我想用帖子列表显示它。假设该页面将包含数千个帖子。因此，我只想加载一次，如果用户导航到应用程序的不同页面然后返回到posts 页面，我不想进行 API 调用并再次加载所有帖子。

我看到Vue有一个叫做<keep-alive>的东西可以缓存某些路由/组件：https://vuejs.org/v2/api/#keep-alive

这是我尝试过的：

<keep-alive :include="posts">
    <RouterView :key="$route.name" class="pb-5"/>
</keep-alive>

不幸的是，我不知道为什么它不适用于我的演示。我收到这样的控制台错误：

[Vue 警告]：属性或方法“posts”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。见：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

found in

---> <App> at /src/App.vue
       <Root>

有人对我做错了什么有任何提示吗？这是我的代码沙盒演示： https://codesandbox.io/s/v010-65o4r?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark

【问题讨论】：

标签： javascript vue.js vuejs2 vue-router

【解决方案1】：

您需要从include 中删除: 绑定，否则它会在您的App 组件中查找名为posts 的数据属性，而不是文字字符串“posts”。

<keep-alive include="posts">
    <RouterView :key="$route.name" class="pb-5"/>
</keep-alive>

您还需要为您的Posts 组件命名为“posts”，因为keep-alive include 指的是组件名称，而您的组件没有：

export default {
  name: "posts",  // <-- Add this
  components: {
    PostsList
  }
};

【讨论】：