I’m making a SPA which have Twitter like UI.
Now, using <q-tabs>, <q-route-tab> for page change and navigation. (vue router is history mode.)

Problem is slow page change. It takes 1 or 2 seconds. Code is like below.

Second time page change is very fast. because using <keep-alive>. (about 0.5s, including fade transition)
But first time page chage is very slow. ( test local, network enough fast, not use lazy loading)

I think the cause is each page code size are big. Heavy code makes first-time page change rendering slower.
Imagine page change on Twitter app, from time-line page to any user’s page.
Twitter is simple but those code is maybe very heavy because of very rich UI.

If heavy code cause page change slower, What can I do for speed up page change?

Now, I searching the way to pre-rendering other router page on client side. But I can’t find the way yet.
( For example, when you see user’s page, I want to do pre-rendering time-line page in background on client side, like after <keep-alive> . )

Please give me your advice.

// router part
 <keep-alive>
   <router-view />
 </keep-alive>

// tab part
 <q-footer>
   <q-tabs
   >
     <q-route-tab :to="{ name: 'timeline' }" icon="a" />
     <q-route-tab :to="{ name: 'user' }"     icon="b" />
     <q-route-tab :to="{ name: 'message' }"  icon="c" />
   </q-tabs>
 </q-footer>

Hi, @metalsadman

Thank your reply!!
Sorry to confuse you because my first post describe is wrong.
I used q-router-tab outside of keep-alive. So footer works well.

Problem is very slow page change at first time page change from page A to Page B.
Second time page change is enough fast thanks to keep-alive.
So, I searching the way to pre-rendering other router page on client side. But I can’t find the way yet.
( For example, when you see user’s page, I want to do pre-rendering time-line page in background on client side, like after <keep-alive> . )

But this is not quasar specific problem? So better to ask at stack overflow ?

Hi, @mseremet

I used <q-footer> outside of <keep-alive>.

<my-custom-footer-with-q-footer/>
<keep-alive>
  <router-view />
</keep-alive>

And, I have not find the way to make first time page change faster. (Second time page change is enough fast thanks of keep-alive)
Only Way I know is make code lighter…

// Postscript
I thoght about not using vue router and only use <q-tab>.
Maybe It is pre-rendering other tab ?But that way, cons are can’t use router.
So User can’t use URL link lile "twitter.com/user/abc "
So I Search the way can use with <q-route-tab> and router,

I’m making a SPA which have Twitter like UI.
Now, using <q-tabs>, <q-route-tab> for page change and navigation. (vue router is history mode.)

Problem is slow page change. It takes 1 or 2 seconds. Code is like below.

Second time page change is very fast. because using <keep-alive>. (about 0.5s, including fade transition)
But first time page chage is very slow. ( test local, network enough fast, not use lazy loading)

I think the cause is each page code size are big. Heavy code makes first-time page change rendering slower.
Imagine page change on Twitter app, from time-line page to any user’s page.
Twitter is simple but those code is maybe very heavy because of very rich UI.

If heavy code cause page change slower, What can I do for speed up page change?

Now, I searching the way to pre-rendering other router page on client side. But I can’t find the way yet.
( For example, when you see user’s page, I want to do pre-rendering time-line page in background on client side, like after <keep-alive> . )

Please give me your advice.

// router part
 <keep-alive>
   <router-view />
 </keep-alive>

// tab part
 <q-footer>
   <q-tabs
   >
     <q-route-tab :to="{ name: 'timeline' }" icon="a" />
     <q-route-tab :to="{ name: 'user' }"     icon="b" />
     <q-route-tab :to="{ name: 'message' }"  icon="c" />
   </q-tabs>
 </q-footer>