navigateTo(target, options)

Sets the current page.

After a call to navigateTo,

  • currentPage reflects the new page,
  • The browser location and navigation history are updated accordingly,
  • The window scroll position is set to “top”.

Please note that the changes may be applied asynchronously.

Params

  • target (Function, Link, Obj, DataItem) – The page or resource to be opened. This can be a callback function returning an Obj, a Link, or a DataItem.
  • options(Object) – Supports setting the hash and the query parameters of the browser location.
    • hash (String) – The browser location hash
    • params (Object) – The browser location query parameters

Throws

  • ArgumentError if the target parameter is invalid or missing.

Remarks

  • If the target is an external link, Scrivito doesn’t change the currentPage and the window scroll position.
  • If the target is a Link, the hash and query of the link are used as navigateTo options.
  • If the target is a DataItem, a link for navigating to the item’s details page is created. If the query provided to Scrivito.navigateTo matches that of the details page, an error is raised. 
  • If you call navigateTo multiple times, the last call (in the order in which they were made) wins.
  • Scrivito loads data asynchronously from the CMS backend. To make sure your target object data is available for navigation, pass in target as a function.
  • For convenience, navigateTo offers a shortcut for providing query parameters: unknown keys in the options object are interpreted as query parameters.
  • A callback function will always work:
    Scrivito.navigateTo(() => Scrivito.Obj.getByPath("/company/about-us"));
    This fails if “About Us” has not yet been loaded in the current page context:
    Scrivito.navigateTo(Scrivito.Obj.getByPath("/company/about-us"));

Examples

Navigate to the site search with the search term “Lorem Ipsum” and an additional “lang” parameter:

Navigate to the blog, filtering by the “Business” tag. The fragment identifier is set to “latest”:

Navigate to the “#top” anchor of the current page:

Navigate to the “#description” anchor of a data item’s details page: