[v2] Router.navigate throws uncaught type error

I’m building an app with inline (stacked) pages and having an issue with the router.

Link navigation is fine: <a href="/page1/"> and <a href="/page2/"> both work with no issues.

However, router-based navigation works on one of my pages, but not the other: app.router.navigate('/page1/') is fine, but when I call app.router.navigate('/page2/'), I get the following error: Uncaught TypeError: Cannot read property ‘f7Page’ of undefined | framework7.js:5589

framework7.js:5589 has if ($newNavbarInner.length === 0 && $newPage[0].f7Page) Somehow, in my case, $newPage[0] is undefined.

My routes are all defined at the app level:

app = new Framework7({
id: 'com.app.mobile',
name:'My App',
routes: [
		path: '/page1/',
		pageName: 'page1',
		path: '/page2/',
		pageName: 'page2',

Page 1 is stacked inside my main view. Page 2 is stacked inside a different view, but I get the error even when that view is active. Both views have {stackPages:true}


Use view.router.navigate on appropriate view

That worked! Thanks.

So, even though the routes are defined at the app level, it’s the view that knows about its pages? That’s why I need to use the view’s router?

app.router is for internal use at the moment. It doesn’t work here because how should it know in which view page needs to be loaded. So always use View’s router for navigation

facing the same error over and over again.
where do i find view.router.navigate? i have a setup with vue. i only could find it here:

this seems pretty silly and not the way to handle it.

What version of F7, of F7Vue? Need a way more details

Yes, FW Vue, here the versions:

framework7-vue: 2.3.0
framework7: 2.3.1

setup: tabs as vies.