[V4] Property "stackPages" not working on routes

Using latest version of Webpack template.

This is my routes.js file:

import HomePage from '../pages/home.f7.html';
...

var routes = [
{
  path: '/',
  stackPages: true,
  async: function (routeTo, routeFrom, resolve, reject) {
    ...
    resolve({component: HomePage});
  }
},
...
]

export default routes;

When I browse through the app, e.g., home/category/commerce/ and then back again from commerce to category, home page reloads (running its async function). Is it possible to browse stacking all the pages, to make sure they are allways on DOM? The queries made to my async function are too heavy and they slows down the browsing.

As you see, I am trying to use stackPages property with true value in the routes.js file, but didn’t work for me.

Я недавно писал статью на форуме как правильно работать с stackPages. Она на русском, но можно воспользоваться переводчиком.

1 Like

Link to shastox post:

Thank you so much for the article.

I am using the following options for all my routes (home, category and commerce), to prevent the home page refresh on back navigation from commerce:

{
  stackPages: true,
  preloadPreviousPage: false,
  keepAlive: true
  ...
}

Using those options, the back navigation from commerce does not refresh the home page, but using refreshPage function the async content is never executed (due to the use of keepAlive: true, I guess).

Is there a way to prevent the home page refresh when I browse back from commerce, letting a manual refresh (calling refreshPage(), navigate() or something similar)?

Regards.

I have failed on trying to find a solution using the information provided on @shastox’s article.

Is there a way to solve the refresh issue that I mentioned in my previous post? I can give you any extra details if needed.

Thank you so much.

With stackPages or keepAlive enabled, page added to DOM will not be refreshed, you need to do manual update logic inside of page:init event of this page