How to use stacked pages?

[hellohello1]

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:

• http://forum.framework7.io/t/navigating-to-stacked-page/3673
• http://forum.framework7.io/t/v2-router-back-removes-stacked-page-from-dom/2997
  Here are the details of my particular problem:
  I am using the official framework7-template-vue-webpack.
  In main.js, I have this:
  // Init App
  new Vue({
  el: ‘#app’,
  template: ‘’,
  // Init Framework7 by passing parameters here
  framework7: {
  id: ‘io.framework7.testapp’, // App bundle ID
  name: ‘Framework7’, // App name
  theme: ‘auto’, // Automatic theme detection
  // App routes
  routes: Routes,
  initOnDeviceReady: true,
  view:{
  stackPages:true,
  }
  },
  // Register App Component
  components: {
  app: App
  }
  });

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.

[hellohello1]

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.