Dynamic Application API

state()

async

Modifies the browser's history and updates the URL in the address bar without triggering a page reload, optionally associating specific data with the updated URL.

  • Accepts an object with the following properties:
    Property
    Type
    Description
    path
    string
    URL path of the new page.
    Required property.
    spa
    string
    The key of the object used from the "spa" property in the "config.js" configuration file for the new page.
    Optional property.
    component
    string
    object
    The name of a component or an object containing components dynamically used on the new page.
    Optional property.
    api
    object
    The object that is used by the new page to make the API request.
    More details about the API object can be found in the documentation for the api() interface.
    Optional property.
    others
    object
    An object that contains all available properties of "spa", where the keys are the names of the "spa" properties, and the values are API request objects.
    Used to determine the priority of a particular property of a "spa".
  • When updating the URL to a similar one, it doesn't create duplicates but instead updates the data associated with the current URL.
  • It is not necessary to wait for the method to be executed using await if not needed.
Example:
// Updates the URL in the address bar.
state({path: '/page'});

// Updates the URL in the address bar with additional options.
state({
   path: '/page',
   spa: 'main',
   component: 'navigation',
   api: {
      url: '/api',
      method: 'POST',
      headers: false,
      body: {
         method: 'getPage',
         path: '/page'
      },
      format: 'json'
   },
   others: {
      main: {
         url: '/api',
         method: 'POST',
         headers: false,
         body: {
            method: 'getPage',
            path: '/page'
         },
         format: 'json'
      },
      second: {
         url: '/api',
         method: 'POST',
         headers: false,
         body: {
            method: 'getPageSecond',
            path: '/page'
         },
         format: 'json'
      }
   }
});

// Waits for the method to complete its execution.
await state({path: '/page'});
Previous init() Next waitState()