Search code examples
vue.jstabsvue-routerquasar-frameworkkeep-alive

How to keep-alive nested QRouteTab (vuejs3 with Quasar2)

I try to create an UI with 2 nested tabs (see the screen shot), which keep alive all visited panels.

I have made a small example here: https://codesandbox.io/s/no-keep-alive-b7x2sj

However only panels of the second level (child tabs) are keep alive (we can navigate between tabs of TEST I, TEST II, ... without re run the setup function, see console output), but when we navigate between tabs of the first level (parent tabs) it doesn't work anymore:

[Quasar] Running SPA. 
##### setup -> index 
##### setup -> layout test A 
##### setup -> test i 
##### setup -> test ii 
##### setup -> test iii 
##### setup -> layout test B 
##### setup -> test j 
##### setup -> layout test A 
##### setup -> test i

As you can see in the console output above:

  • the setup of "test i" is rerun, when the user comeback in the tab "test A"
  • and we don't comeback on "test iii", which are the last panel visited in "test A".

I try to fix it, by adding <keep-alive> for each parent panel (test A, B, C, D) in index.vue, like:

<q-tab-panel name="testA" class="no-padding">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</q-tab-panel>

However, it doesn't work nether and I get a side effect which run the setup of "test j" two consecutive times, as you can see in the console:

[Quasar] Running SPA. 
##### setup -> index 
##### setup -> layout test A 
##### setup -> test i 
##### setup -> test ii 
##### setup -> layout test B 
##### setup -> test j 
##### setup -> test j

You can find the code here: https://codesandbox.io/s/duplicate-run-of-setup-jjovrb

Does anyone have an idea to help me to get through these issues ? Or an explanation of why it doesn't work as I expected.

Thank, Eric.

Solution

  • As explain here:

    the solution was to not used QTabPanel with QRouteTab.

    You can find an example of the solution here: https://codesandbox.io/s/without-qtabpanel-m43nec

    However, there still have a bug which run setup function twice in child route.

    [Quasar] Running SPA. 
##### setup -> index 
##### setup -> layout test A 
##### setup -> test i 
##### setup -> layout test B 
##### setup -> test j 
##### setup -> test j 
##### setup -> test C

    It seems to be linked to a known issue of the vuejs's router: https://github.com/vuejs/router/issues/626