[solved] Keep one specific page cached in the DOM for ever

Questions
1

Hi,

I’m using Framework7 2 with vue.js and webPack 2, and I’m new to F7 !

I’m trying to cache a specific page in the DOM, i.e. the router never delete it but simply hide it and show it back when the corresponding url is requested (exactly has it doing for the direct previous page).

It’s a page with some heavy webGL stuff, and it’s the home page, load it one time for all will be a huge performance improvement.

i tried with the view’s option stackPages : true, but it will only work if i’m using the router.back method, using router.navigate(’/my-stacked-page’) will always load the page again in a new div. (and it’s stacking all pages)

I’m thinking about an other approach by not putting the webGL thing in a specific page put in a simple block in the main view layout, and show / hide it animated like other page with some css/js, and “manualy” pushState in history for it, but it’s sound a little bit hacky to me, isn’t?

How can I load this content one time for all but make it act like a normal page (animate it like them and store it state in the history) ?

2

Should be possible with stackedPages. Just in your home page route instead of url or template or component, use ‘pageName’ or ‘el’ reference so it will look for page in DOM on request to

3

Indeed, pageName or el property in my routes definition was the solution, thank!

It seam that I can only use pageName or el property if stackedPage = true.
The documentation say “el : Load page from DOM by passed HTMLElement”

Is there some use cases that we can use this properties without stackedPage = true ?

In the other hand, is there a way to keep stacked only some specific page?

4

For example if you load the page somehow on your own, or you use some framework that render page on its own, then you can pass el

In the other hand, is there a way to keep stacked only some specific page?

No, this is not supported

5

okay, anyway thank you for your fast support :slight_smile:

6

Can this work when I’m navigating via a link element with the new page’s path as the href?

7

I’m also new to Framework7 and have the exact problem, but didn’t really follow how to navigate to page by pageName or el ref?. Could you please elaborate?

1 Like