VRD Vanilla JavaScript Router

Introduction

VRD Router is a lightweight, hash-based routing library for single-page applications (SPAs) built with Vanilla JavaScript, HTML, and CSS. It provides an easy way to handle 404 requests and simplify the routing process in your SPA.

Installation

To install VRD Router, simply include the following script in your HTML file:

<script src="https://unpkg.com/[email protected]/router.js"></script>

Configuration

To configure the router, add a data-config element to your HTML file and define the paths and content for each page in your SPA:

<p data-config>
  {
    "router": {
      "home": {
        "path": "#/page=home",
        "content": "home"
      }
    }
  }
</p>

Usage

To display a specific page when the SPA is first loaded, set the URL hash to the desired path in the window.onload event:

window.onload = () => {
  window.location.hash = "#/page=home";
};

To display content for a specific page, create a data-routeritem element with the corresponding router-content and id attributes:

<div data-routeritem page:title="Vanilla Router" router-content="home" id="home">
  <p>The content inside will only be displayed when the user visits https://yourpage.com#/page=home</p>
</div>

If a user visits a page that does not exist, you can create a custom 404 page within your HTML file:

<div id="error" error:title="404 not found">
  <h1>Oops, looks like you hit a roadblock</h1>
  <a href="#/page=home">Go back home</a>
</div>

Conclusion

VRD Router is a simple and effective solution for handling routing in SPAs built with Vanilla JavaScript, HTML, and CSS. With its hash-based URLs and easy-to-use configuration, it's a great choice for developers looking for a minimalistic routing solution.