My challenge involves displaying a page called posts which includes a long list of posts. To optimize performance, I want to load this page only once. If a user navigates away from the page and then returns, I aim to avoid making repeated API calls to reload all the posts.
In my exploration, I came across Vue's <keep-alive> feature which can cache specific routes/components: https://v2.vuejs.org/v2/api/#keep-alive
I attempted the following implementation:
<keep-alive :include="posts">
<RouterView :key="$route.name" class="pb-5"/>
</keep-alive>
However, I encountered an issue with my demo where it didn't work as expected. The console displayed an error message:
[Vue warn]: Property or method "posts" is not defined on the instance but referenced during render. Ensure that this property is reactive by defining it in the data option or initializing it for class-based components. For more information: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <App> at /src/App.vue
<Root>
If anyone has suggestions or tips on what might be going wrong, here is the link to my codesandbox demo: https://codesandbox.io/s/v010-65o4r?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark