Using pageName in routes doesn't seem to work

Questions
1

So I have a simple page I’m working on, I’m loading 3 pages in the intial html and each has it’s own data-name="" parameter. I’m initializing my routes and trying to load one of the pages initially but it just sits on the single page, which is always the last one appearing in the html. If I manually trigger a navigate() it likewise does nothing.

Init code:

var app = new Framework7({
// App root element
root: ‘#app’,
// App Name
name: ‘My App’,
// App id
id: ‘com.myapp.test’,
theme: ‘md’,
// Add default routes
routes: [
{
name: ‘login’,
path: ‘/login/’,
pageName: ‘login’
},
{
name: ‘resetPassword’,
path: ‘/resetPassword/’,
pageName: ‘resetPassword’
},
{
name: ‘setSecurityQuestion’,
path: ‘/setSecurityQuestion/’,
pageName: ‘setSecurityQuestion’
}
],
view: {
pushState: true
},
});

var mainView = app.views.create(’.view-main’, {url: ‘/login/’});

demo url:
http://safetyapp.wpengine.com/

2

Hm do I have to use stacked pages to prevent it from removing old pages from the DOM? The pages don’t really ‘stack’ I’d never need a back button for example, but I don’t want them unloaded right as the app initializes.

3

Okay I ended up fixing it with…

{
	name: 'resetPassword',
	path: '/resetPassword/',
	/*pageName: 'resetPassword'*/
	el: document.querySelector('.page[data-name="resetPassword"]')
},

So just querying the element myself instead of specifying page name but still curious why that was needed and if there’s a better way?

4

pageName intended to work with stackPages only

1 Like
5

Thanks for confirming. I ended up using the ‘el’ option but still kept the ‘stacked’ class so they wouldn’t be removed. If I wanted to have a library of preloaded pages would I just put them outside the #app DOM element entirely, or is there a better place?