How to use stacked pages?


I’m having an issue which a couple of other people have experienced but for some reason it has never been resolved. I’m sure it’s quite simple, but I have spent hours to no avail. Here are references to the other unresolved questions:

As you can see, stackPages is indeed set to true.
On each of my pages (they are vue components), the code starts like this:

From this, I have two questions:

  1. When I click on back, the page is removed from the DOM. Why? Stacked for both the page and on the views, but it’s still removed?
  2. I am unable to navigate to stacked pages. In routes.js, I am unable to even set pageName.
    export default [
    path: ‘/’,
    pageName: ‘home’,
    component: HomePage,

    In the above, setting pageName, which I believe is necessary for navigating to the stacked page, results in the following error: TypeError: Cannot read property ‘f7Page’ of undefined

If someone could answer these questions or point me to an example, I would really appreciate it. I have searched this forum thoroughly and cannot find a solution. I simply want to keep pages I’ve already loaded in the DOM, and then navigate back to them.


Ok, I found one of the problems:
I was using both pageName AND component, and this caused new instances of the page to be created.

Now I face the problem of navigating via pageName. I try this.$f7.router.navigate("home"); and it doesn’t find the page.

UPDATE: I got it working using the back method. e.g. $f7.router.back("/mypage/"), but still couldn’t find any reasonable method to make it work using pageName. Using<f7-link page-name="myPage">myPage</f7-link> didn’t work. The method using the async route property referred to in this thread using resolve({pageName: 'home'}); does navigate to the page, but scroll position is lost.

So I got my stuff working, but I’m not satisfied with my understanding. If anybody has an example using router to navigate between stacked pages by pageName, I’d love to see it.