laksa19 / routerjs

Simple routing html page using javascript

routerjs

Simple routing html page using javascript

Demo

<div id="container"></div>

var f_url = window.location.href;
var t = '?t=' + new Date().getTime();

var page = {
      "home":"./page/home",
      "about":"./page/about",
      "user-user1":"./page/user1",
      "404":"./page/404",

      "laksa19":"https://laksa19.github.io"
      };

function gpath(){
  if(f_url.indexOf("?") > -1){
      var gpath_ = f_url.split("&")[0];
      var path_ = gpath_.split("?")[1].replace(/\/|%2F/gi,"-");
      return path_;
  }
}



function route(id,lpage = gpath()){

    if(!page[lpage] && !lpage){
      // set root path
      loaddata(id,page["home"]);
    }else if(page[lpage]){
      // load current page
      loaddata(id,page[lpage]);
    }else{
      // load 404 page
      loaddata(id,page["404"]);
    }

}


function loaddata(id,htmlfile){
  html_file = htmlfile+".html";
  fetch(html_file+t)
    .then((response) => {
      return response.text();
    })
    .then((data) => {
      // render to index
      document.getElementById(id).innerHTML = data;
    })
    .catch((error) => {
      console.error('Error:', error);
    });

}

// routing
route("container");