Views and the Router Instance

Every initialized view owns exactly one router, so "navigate" always means "navigate in this view". You reach it as app.views.main.router, as view.router for a view from app.views.create(), or as $f7router inside a page component. Its state is in plain properties: url, currentRoute and previousRoute (with url, path, params, query, hash and name), and history, the URLs from the root page to the current one. Most view parameters (App Initialization Options) are router settings:

View parameters that shape the router
Parameter	Default	Effect on navigation
url / data-url	document URL	The first page the view loads
preloadPreviousPage	true	Keeps the page behind in the DOM for back and swipe-back
iosSwipeBack / mdSwipeBack	true / false	Edge swipe to go back, per theme
browserHistory	false	Mirrors history in the address bar as #!/books/3/

BookNest's app.js sets window.app = app during development, so you can drive the router from the DevTools console (top-level await works there). Two options rewrite history instead of adding to it:

Route options that rewrite history, run in the DevTools console

app.off('routeChange routeChanged'); // silence the logging handlers
const router = app.views.main.router;
const pause = () => new Promise((done) => setTimeout(done, 700));
router.navigate('/books/1/');
await pause();
router.navigate('/books/2/', { reloadCurrent: true });
await pause();
console.log('after reloadCurrent:', JSON.stringify(router.history));
router.navigate('/', { reloadAll: true, animate: false });
await pause();
console.log('after reloadAll:', JSON.stringify(router.history));

Output

book.f7 props={"id":"1"} query={}
book.f7 props={"id":"2"} query={}
after reloadCurrent: ["/","/books/2/"]
after reloadAll: ["/"]

reloadCurrent swapped book 1 for book 2 in place; reloadAll reset the stack. Related options are clearPreviousHistory and history: false, and router.generateUrl({ name: 'book', params: { id: 6 } }) returns /books/6/.

MENU

Views and the Router Instance