Router JavaScript API

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');

View Navigation Methods

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

View Navigation Shortcuts Methods

Methods to load new page:

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

  • url - URL of the page to load

mainView.router.loadContent(content) - load dynamically generated content as a new usual page.

  • content - string or HTMLElement or [jQuery/Zepto/DOM7 collection] or [array of HTMLElement] - content to load as page

Methods to reload currently active 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

  • url - URL of the page to load

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

  • content - string or HTMLElement or [jQuery/Zepto/DOM7 collection] or [array of HTMLElement] - content to load as page

Methods to reload previous View's page (if there are two pages in View's DOM):

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

  • url - URL of the page to load

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

  • content - string or HTMLElement or [jQuery/Zepto/DOM7 collection] or [array of HTMLElement] - content to load as page

Methods to refresh page:

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