时间戳

首页 > 解决方案 > VueJS 和 Keep-Alive：为什么会出现控制台错误？

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

问题描述

我有一个名为的视图/页面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

标签： javascriptvue.jsvuejs2vue-router

解决方案

您需要从中删除:绑定include，否则它会寻找posts在您的App组件中调用的数据属性，而不是文字字符串“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
  }
};

推荐阅读