Vanilla Router

JS vanilla router

---

router.js

const Router = {
  // control anchors 
  init() {
    const links = document.querySelectorAll('a.navlink').forEach(link => {
      link.addEvenetListner("click", (event) => {
        event.preventDefault()
        const url = event.target.href
        Router.go(url)
      })
    })
    
    // Event handler for URL changes
    window.addEventListner("popstate", event => {
      // false to avoid add history entry
      Router.go(event.state.route, false)
    })
    // check initial URL (if user paste url)
    Router.go(location.pathname)
  },
  // dom changer
  go(route, addToHistory=true) {
    // console.log(`going to ${route}`)
    if (addToHistory) {
      history.pushState( { route }, '', route)
    }
    
    // we have two stratigies one is hide and show pages seond attach and remove pages
    let page = null
    switch(route) {
      case "/":
        pageElement = document.createElement("h1");
        pageElement.textContent = "Menu"
        break;
      case "/order":
        pageElement = document.createElement("h1");
        pageElement.textContent = "Your order"
        break;
      default:
        if (route.startWith('/product-')) {
          pageElement = document.createElement("h1");
          pageElement.textContent = "Your order"
          const paramId = route.substring(route.lastIndexOf("-")+1)
          pageElement.dataset.id = paramId
        }
    }
    const cach = document.querySelector("main")
    cache.innerHTML = ""
    // or cache.children[0].remove()
    cache.appendChild(page)
    window.scrollX = 0
    window.scrollY = 0
  }
}

window.router = Router
window.addEventListner("DOMContentLoaded", async () => {
  // loadData() or any process when page loaded
  router.init()
})