Vue keep-alive not working in Quasar, mounted hook is always called using $router.back()

Question

I have a Quasar app where I would like to cache certain pages using keep-alive for the following scenario: User navigates from home page to Page 1, then from Page 1 user navigates to Page 2, then user goes back using $router.back() to Page 1 from Page 2, in current scenario the mounted() hook is ran again in Page 1 and the page re-rendered making another API call which is not necessary at all. My current implementation looks like this:

  <q-page-container class="overflow-auto">
    <keep-alive>
      <router-view :key="$route.fullPath"></router-view>
    </keep-alive>
  </q-page-container>

I have setup the name property in the routes and also in the page itself. I also tried using include="Home,Workout " but the result is same, the mounted hook runs each time and the page is re-rendered. I also need the page to stay alive so I can change the scroll behavior, scroll back to where the user was before he left Page 1. That is remembered I can see the console log for example showing y:883 but since the page is re-rendered it ends up at the top again. Worth to mention maybe that I am using router hash mode?

Answer 1

What you are doing is wrong,if you want to stay alive youre page and dont refresh, you can do this... vue js is Component Axis, now you create mother component and page1 and page2 is children that import in mother component then you and swich to pag1 and page2 whith handeling v-if and your page dont refresh, you cant chnage route without refresh but you can use query to set in route

all the time you change route then component render and mounted call