带有 URL 参数变量的简单路由器

Question

我正在尝试使用 ID 的 URL 参数制作一个简单的路由器。如localhost/profile/123能正常工作，但如果我删除preventDefault，这样的链接工作正常，或刷新浏览器，或直接进入该相同的URL，这是行不通的，而浏览器外观的JavaScript文件main.js中localhost/profile，而不是产地localhost。没有参数的路由工作正常。这里发生了什么？

const router = async path => {

  if(!path) path = location.pathname

  const segment = route.split('/')

  path =  '/' + segment[1]
  const parameter = segment[2]

  const routes = {
    '/' : { handler: home },
    '/about' : { handler: about },
    '/profile' : { handler: profile },
  }

  render(html`
    <main>${await routes[path].handler(parameter ? parameter : '')}</main>
  `, document.body)
}



const main = async () => {

    await router()

    document.body.addEventListener('click', e => {

      e.preventDefault()

      if(e.target && e.target.nodeName == "A") {
        let path = e.target.pathname

        history.pushState({urlPath: path}, '', location.origin + path)
        onpopstate = () => router()

        router(path)
      }

    })
}

main()