Push navigation

The library provides intuitive navigation options to seamlessly transition between pages and initiate GET or POST requests.

Initiating a GET request or navigating to a new page is straightforward. Such actions will correspond to a get router, with the request parameter converting into an instance of URLSearchParams for the request.

Arguments

  • path (string): Specifies the URI, which can be a regular path or a hash.

  • request (object): Sends a GET request or query string to the dispatcher. This will be transformed into an instance of URLSearchParams. When executed in a browser, the query string will also be appended to the URL in the address field.

Make get request

// URI hash (fragment with hashtag) navigation
container.get("dispatch").navigateTo("#articles/824/hello-world", { test: "A get request" });

// URI path navigation
container.get("dispatch").navigateTo("/articles/824/hello-world", { test: "A get request" });

The navigation result

The above navigation will trigger the result for the matching router:

// GET: example.se/?test=A+get+request#articles/824/hello-world
router.get('/articles/{id:[0-9]+}/{slug:[^/]+}', function(request, container, helper, builder) {
    const id = request.vars.id.pop();
    const slug = request.vars.slug.pop();
    const test = request.request.get.get("test"); // Get the query string/get request "test"
    console.log(`Article ID: ${id}, Slug: ${slug} and GET Request ${test}.`);
});

POST Request

Creating a POST request is similarly efficient, targeting a post router. The request parameter will be in object to facilitate the request.

Arguments

  • path (string): Defines the URI, which can be a regular path or a hash.

  • request (object): Submits a POST request to the dispatcher. This will be a object, allowing for detailed and structured data transmission.

Make post request

container.get("dispatch").postTo("#post/contact", { firstname: "John", lastname: "Doe" });

The post request result

The above post will trigger the result for the matching router:

// POST: example.se/#post/contact
router.post('/post/contact', function(request, container, helper, builder) {
    const firstname = request.request.post.firstname;
    const lastname = request.request.post.lastname;
    console.log(`The post request, first name: ${firstname}, last name: ${lastname}`);
});

Last updated