I am working on a Quasar application where I want to implement page caching using keep-alive in a specific scenario. The scenario is as follows: the user goes from the home page to Page 1, then navigates to Page 2, and finally returns to Page 1 using $router.back() from Page 2. Currently, when the user goes back to Page 1, the mounted() hook is executed again and the page is re-rendered, making an unnecessary API call. My current code implementation is like this:
<q-page-container class="overflow-auto">
<keep-alive>
<router-view :key="$route.fullPath"></router-view>
</keep-alive>
</q-page-container>
I have set up the name property in the routes and also on the page itself. I have even tried using:
include="Home,Workout"
but the issue persists - the mounted hook runs every time and the page gets re-rendered. Additionally, I need the page to stay alive so I can adjust the scroll behavior and bring the user back to where they were before leaving Page 1. Even though I can see that it's remembered (like the console log showing y:883), the page reloads and scrolls to the top again.
It may be worth mentioning that I am using router hash mode.