概念

• 可以一对多分发请求的对象，根据不同的 url 地址展示不同的内容。

  默认路由

• 当用户没有指向某个地址时，默认显示的地址

404路由

• 当请求的 hash 不存在时,展示 404 内容

路由表

• 指向特定网络地址的路径的表格

三种路由类型

hash

• 缺点：SEO不友好，# 后的内容会被浏览器劫持，不会发送给服务器

  const routerTable = { '1':div1,'2':div2,'3':div3,'4':div4 }
  function route(container) {
    let number = window.location.hash
    console.log("number: " +number)
    number = number || 1
    //获取界面
    let div.routetable[number.tostring()];
    div = document.querySelector("#div404")
  div.style.display ="block";
  //展示界面
  container.innerHTML=''
  container.appendchild(div)
  }
  window.addEventListener('hashchange',route)

  history

• 缺点：所有前端路由必须指向同一页面 ，ie8 不支持

  function route(container) {
    let number = window.location.pathname
    console.log("number: " +number)
    number = number || /1
    //获取界面
    let div.routetable[number.tostring()];
    div = document.querySelector("#div404")
  div.style.display ="block";
  //展示界面
  container.innerHTML=''
  container.appendchild(div)
  }
  const allA =document.querySelector("a.link")
  for (let a of allA) {
  a.adEventListener("click",e => {
    e.preventdefault()
    const href= a.getattribute("href");
    window.history.pushstate(null, `page-${href}`, href)
    route(app)
  })
  }

  memory

• 缺点：没有url，单机版路由，不可分享

  function route(container) {
    let number = window.localStorage.getItem('xxx')
    console.log("number: " +number)
    number = number || /1
    //获取界面
    let div.routetable[number.tostring()];
    div = document.querySelector("#div404")
  div.style.display ="block";
  //展示界面
  container.innerHTML=''
  container.appendchild(div)
  }
  const allA =document.querySelector("a.link")
  for (let a of allA) {
  a.adEventListener("click",e => {
    e.preventdefault()
    const href = a.getAttribute('href')
    window.localStorage.setItem('xxx',href)
    route(app)
  })
  }