0

Пытаюсь написать простой роутер на чистом JS, работает он по такому принципу - 

const router = {
      getURL() {
       return window.location.hash.slice(1)
     },

 navigate(hash) {
   window.location.hash = hash
 }
}

const routes = [
  { path: "", component: "<h1>home</h1>"},
  { path: "about", component: "<h1>about</h1>" }
]

function renderRoute() {

  let url = router.getURL()

 let route = routes.find(r => r.path === url)

 document.querySelector("#app").innerHTML = route.component

}

function initRoutes() {
 window.addEventListener("hashchange", renderRoute())
}</code></pre>



<!DOCTYPE html>
  <html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>Document</title>
  </head>
  <body>

   <a href="#">Home</a>
   <a href="#about">About</a>

   <div id="app"></div>

  </body>
  </html>

И если изменить адрес на "#about" и перезагрузить страницу, то все будет хорошо и зарендерится содержимое route.component, которое относится к "about", но мне нужно реализовать это без перезагрузки страницы.(

P.S. Код скорее всего очень корявый, я писал его торопясь, да и я всего лишь новичок, так что не судите строго, заранее спасибо!

R. Shirkhanov
  • 101
  • @Grundy тут правку интересную предлагают – andreymal Jan 06 '19 at 22:55
  • @andreymal, ага :-) интересно, автор хотя бы попробовал решение из дубликата?:) – Grundy Jan 06 '19 at 23:01

0 Answers0