v0.9
navig
object navig → file: core/lib/navig.jsThe navigation library facilitates changes to the application URL. It's a container for current and previous URL state.
Instance
Instance created in the lib/navig.js file so no need to make instance with "new" keyword.Properties
Property | Description | Type | Default |
---|---|---|---|
previous | previous uri and controller {uri:string, ctrl:Controller} |
object | |
current | current uri and controller {uri:string, ctrl:Controller} |
object |
Methods
GETTERS
getPreviousURI() :string
Get the previous URI. The uri is path + query string, without hash, for example: /page1.html?q=12getCurrentURI() :string
Get the current URI. The uri is path + query string, without hash, for example: /page1.html?q=12NAVIGATION
goto(url, state, title) :void
Navigates to a new view by changing URL and controller.- The URL in the browser address bar is changed with
window.history.pushState(state, title, url)
.
More at ...Web/API/History/pushState
- The pushstate event emitted in the eventEmitter. This event will change controller.
-
ARGUMENTS:
- url :string - absolute URL path, for example: '/customer/product/25'
- state :string - The state data. Fetch it with
event.detail.
- title :string - Not used in major browsers.
navig.onPushstate((event) => {
// Access the state data passed with the pushState call
const stateData = event.detail;
console.log('Navigated to:', stateData.url);
console.log('Additional state data:', stateData);
});
goblind(url, state, title) :void
Change URL but without changing the controller and view.This is useful when app needs to change parameter in the URL without changing anything else. For example: /product/egg → /product/milk
-
ARGUMENTS:
- url :string - absolute URL path, for example: '/customer/product/25'
- state :string - The state data. Fetch it with
event.detail.
- title :string - Not used in major browsers.
forward() :void
Go forward like forward browser button is clicked.back() :void
Go back like back browser button is clicked.history(delta) :void
Loads a specific page from the session history.Use it to move forwards and backwards through the history depending on the delta value.
-
ARGUMENTS:
- delta :number - history index number, for example: -1 is like back(), and 1 is like forward()
reload() :void
Reloads the page like refresh button is clicked.EVENT LISTENERS
onPushstate(listener) :void
Listen for the pushstate event, for example when dd-href is clicked or when goto() is used.-
ARGUMENTS:
- listener :Function - callback function which will be executed on 'pushstate' event ,for example pevent => { ... } where pevent is pushstate or popstate event
onPopstate(listener) :void
Listen for the popstate event, for example when BACK,FORWARD browser button is clicked or when back(),forward() is used.-
ARGUMENTS:
- listener :Function - callback function which will be executed on 'pushstate' event ,for example pevent => { ... } where pevent is pushstate or popstate event
onUrlChange(listener) :void
Listen for the URL change i.e. 'popstate' or 'pushstate' event. The URL change includes any URL change even hash part modification.-
ARGUMENTS:
- listener :Function - callback function which will be executed on 'pushstate' event ,for example pevent => { ... } where pevent is pushstate or popstate event
onHashchange(listener) :void
Listen for the hashchange event. This happens when window.location.hash is changed. For example /product#image --> /product#description-
ARGUMENTS:
- listener :Function - callback function which will be executed on 'pushstate' event ,for example pevent => { ... } where pevent is pushstate or popstate event
Example
const { Controller, corelib } = require('@mikosoft/dodo');
class MyCtrl extends Controller {
__init() {
corelib.navig.onPushstate(pevent => {
const stateData = pevent.state;
console.log('Navigated to:', window.location.pathname);
console.log('State data:', stateData);
});
}
runGOTO() {
corelib.navig.goto('/admin/products/list'); // activate pushstate
}
runBACK() {
corelib.navig.back(); // activate popstate
}
}
Stackblitz Examples
- navig - test navig library methods