路由.md

路由

路由分发请求的东西

路由有三种模式：hash模式，history模式，memory模式

• hash：任何情况下都可以使用hash做路由，但是seo不友好，因为服务器收不到hash
• history：后端将所有前端路由都渲染到同一个页面
• memory：用对象类存储路径，一般是缓存，是否非浏览器

history模式

<a href="#1">go to 1</a>
<a href="#2">go to 2</a>
<a href="#3">go to 3</a>
<a href="#4">go to 4</a>
<div id="app"></div>
<div id="div404" style="display: none;">404</div>
<script>
  const div1 = document.createElement("div");
  div1.innerHTML = "1";
  const div2 = document.createElement("div");
  div2.innerHTML = "2";
  const div3 = document.createElement("div");
  div3.innerHTML = "3";
  const div4 = document.createElement("div");
  div4.innerHTML = "4";
  const routeTable = {
    "1": div1,
    "2": div2,
    "3": div3,
    "4": div4,
  };
  router();
  window.addEventListener("hashchange", () => {
    router();
  });
  function router() {
    let number = window.location.hash.substr(1);
    const app = document.querySelector("#app");
    number = number || 1;
    let div = routeTable[number.toString()];
    if (!div) {
      div = document.querySelector("#div404");
    }
    div.style.display = "block";

    app.innerHTML = "";
    app.appendChild(div);
  }
</script>

history模式

history模式需要后端支持

点击a标签时，阻止默认事件，将路径存储到window.history.pushState中。同时触发路由跳转函数。

<a class="link" href="/1">go to 1</a>
<a class="link" href="/2">go to 2</a>
<a class="link" href="/3">go to 3</a>
<a class="link" href="/4">go to 4</a>
<div id="app"></div>
<div id="div404" style="display: none;">404</div>
<script>
  const div1 = document.createElement("div");
  div1.innerHTML = "1";
  const div2 = document.createElement("div");
  div2.innerHTML = "2";
  const div3 = document.createElement("div");
  div3.innerHTML = "3";
  const div4 = document.createElement("div");
  div4.innerHTML = "4";
  const routeTable = {
    "/1": div1,
    "/2": div2,
    "/3": div3,
    "/4": div4,
  };

  const allA = document.querySelectorAll("a.link");
  for (let a of allA) {
    a.addEventListener("click", (e) => {
      e.preventDefault();
      const href = a.getAttribute("href");
      window.history.pushState(null, `page ${href}`, href);
      onStateChange(href);
    });
  }
  router();
  function onStateChange() {
    router();
  }
  function router() {
    let number = window.location.pathname;
    console.log(number);
    const app = document.querySelector("#app");
    number = number === "/" ? "/1" : number;
    let div = routeTable[number.toString()];
    if (!div) {
      div = document.querySelector("#div404");
    }
    div.style.display = "block";

    app.innerHTML = "";
    app.appendChild(div);
  }
</script>

memory模式

memory模式是用缓存来存储路径

<a class="link" href="/1">go to 1</a>
<a class="link" href="/2">go to 2</a>
<a class="link" href="/3">go to 3</a>
<a class="link" href="/4">go to 4</a>
<div id="app"></div>
<div id="div404" style="display: none;">404</div>
<script>
  const div1 = document.createElement("div");
  div1.innerHTML = "1";
  const div2 = document.createElement("div");
  div2.innerHTML = "2";
  const div3 = document.createElement("div");
  div3.innerHTML = "3";
  const div4 = document.createElement("div");
  div4.innerHTML = "4";
  const routeTable = {
    "/1": div1,
    "/2": div2,
    "/3": div3,
    "/4": div4,
  };

  const allA = document.querySelectorAll("a.link");
  for (let a of allA) {
    a.addEventListener("click", (e) => {
      e.preventDefault();
      const href = a.getAttribute("href");
      window.localStorage.setItem("route",href)
      onStateChange(href);
    });
  }
  router();
  function onStateChange() {
    router();
  }
  function router() {
    let number = localStorage.getItem("route")

    const app = document.querySelector("#app");
    number = !number ? "/1" : number;
    let div = routeTable[number.toString()];
    if (!div) {
      div = document.querySelector("#div404");
    }
    div.style.display = "block";

    app.innerHTML = "";
    app.appendChild(div);
  }
</script>