How to use keepAlive on initial pages?

Questions
1

I have an app with a basic structure (Views as Tabs, with each tab containing a page)

Like:

<div class="view view-init tab" id="tab-2">
    <div class="page">Page content here</div>
</div>

Some data is fetched and inserted inside the page.

When I navigate to a new page and go back, the data is still here. But when I navigate 2 page deeper (home → page2 → page3 → back → back) then the data is not there anymore.

I understand that I have to use keepAlive: true (and it works well for traditional routes) but my question is how do I use the keepAlive parameter on “initial” pages, the ones that are already in the DOM in index.html when the app is initialized, and not dynamically loaded with routes? I tried data-keep-alive=“true” on the div tag but it doesn’t work.

3 Likes
2

I would like to bring this to the top. I would like to understand the solution or workaround for this problem.

2 Likes
3

Hi am also encountering the same problem any solution. And what I have realized is that Framework 7 only keeps two pages in view router’s navigation history and if you go beyond two pages the most recent page " most especially the home is removed from the history and Dom ".
As I was reading through the forum earlier versions supported the starkPages view parameter but now it is deprecated
As Mr.vald mentioned keep alive only works for the dynamically loaded pages and not for initial pages like pages in views so am also stark

4

Hi, I had this problem in the past if I’m not mistaken in version 5 of f7, to find a solution that still works today, follow the same code, to understand how the routing works in f7 it loses the data reference when we navigate further bottom
solution:

var device = Framework7.getDevice();
var app = new Framework7({
version: “1.0.1”,
// App store
// store: store,

// App routes
routes: routes,

// fo solution use this
view: {
browserHistory:true,
pushStateSeparator:‘’,

pushState: true,
preloadPreviousPage: false, 
stackPages: true,

// reloadAll: true,
// reloadCurrent: true,
// ignoreCache: true,   
// reload:true,
// animate:false

},
…

1 Like