Navigation in Framework7 is very flexible. It gives you a lot of different ways to handle pages:
Ajax Pages - load pages from different files (default behavior)
You may create and load Dynamic Pages using JavaScript API
You may use Inline Pages where all your pages are already in DOM, and nothing additionaly loaded
You may load pages from Template7 templates
And the most awesome part is that you can mix all these ways to deliver content in your App
As you may read in Views section - View is a separate visual part of app with its own settings, navigation and history. Navigation router in Framework7 is connected to and part of the initialized View. So don't forget to initialize View (with myApp.addView()
method) if you need navigation in any part of your app (pages, popup, panel, etc.):
var mainView = myApp.addView('.view-main');
There are two main router methods in View:
mainView.router.load(options) - load required page to view
mainView.router.back(options) - This method will trigger reverse animation to the previous page, in other words - going back in View history
Each of these methods accepts options
object with the following properties:
Parameter | Type | Description |
---|---|---|
url | string | URL of the page to load |
content | string or HTMLElement or [jQuery/Zepto/DOM7 collection] or [array of HTMLElement] | Content of the Dynamic page to load |
pageName | string | Page name (data-page) of page to load. Only for Inline Pages (DOM Cache) |
template | function (Template7 compiled template) | Template to be rendered and loaded as Dynamic page |
pageElement | HTMLElement | HTMLElement of page to load if it is already added to the Pages container manually or by different means/library. |
context | object or array | Template7 context to be applied for page rendering. Learn more about it in Template7 Pages section |
contextName | string | Optional. Context name/path in templatesData to be applied for page rendering with Template7. Learn more about it in Template7 Pages section |
query | object | Object with additionall query parameters that could be retreived in query object of Page Data |
force | boolean | Optional. Only for back method. If set to true then it will ignore previos page in history and load specified one |
ignoreCache | boolean | Optional. If set to true then it will ignore if such URL in cache and reload it using XHR again |
animatePages | boolean | Optional. Allows to override the same View's parameter to enable/disable transition between pages for this case |
reload | boolean | Optional. If set to true then it will not load page as new page, and just replace currently active View's page with specified one. It will also modify View's history by replacing last history item |
reloadPrevious | boolean | Optional. Used in addition to reload . Will do the same as reload but for previous page. |
pushState | boolean | Optional. Tell View to store loaded page in browser's history state or not |
Note, that you may use only url
or content
or pageName
or template
property at the same time
mainView.router.loadPage(url) - load required page to view. In other word will do the same if you click on some link with this URL
mainView.router.loadContent(content) - load dynamically generated content as a new usual page.
mainView.router.reloadPage(url) - reload required page to the currently active view's page. It will also modify View's history and replace last item in history with the specified url
mainView.router.reloadContent(content) - reload required content to the currently active view's page. It will also modify View's history and replace last item in history with the specified content
mainView.router.reloadPreviousPage(url) - reload required page to the previous view's page. It will also modify View's history and replace related item in history with the specified url
mainView.router.reloadPreviousContent(content) - reload required content to the previous view's page. It will also modify View's history and replace related item in history with the specified content
mainView.router.refreshPage() - refresh currently active view's page. In other words it is the same as .reloadPage with url parameter equal to currently active URL
mainView.router.refreshPreviousPage() - refresh previous view's page. The same as .reloadPreviousPage with url parameter equal to previous View's URL