前端路由 - 《Web 基础》

默认路由
404 路由
嵌套路由
路由模式

路由：通过互联的网络把信息从源地址传输到目的地址的活动
路由表(routing table）：存储着指向特定网络地址的路径
路由器：

默认路由

没有指定路由地址时跳到默认地址

404 路由

当路由地址不存在时跳到 404 界面

嵌套路由

在一层路由下再路由

路由模式

html 页面：
“.app/“ 后的地址：hash 为 “#1”，histrory 为 “/1”, memory 没有

hash 模式

使用 hash 表存储路由信息

  <body>
    <a href="#1">go to 1</a>  
    <a href="#2">go to 2</a>
    <a href="#3">go to 3</a>
    <div id="app"></div>
    <div id="div404" style="display: none;">not found</div>
    <script src="src/index.js"></script>
  </body>

const app = document.querySelector("#app");
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 routeTable = {  
  "1": div1,  
  "2": div2,
  "3": div3,
};
function route(container) {
  let number = window.location.hash.substr(1);
  // 默认路由：如果没有指定地址，则默认为界面1
  number = number || 1;
  // 通过地址获取界面
  let div = routeTable[number.toString()];
  if (!div) { // 404 路由,如果没有找到地址，则跳转到 404
    div = document.querySelector("#div404");
  }
  div.style.display = "block";
  container.innerHTML = "";
  container.appendChild(div);
}
// 为了同时满足嵌套路由，route 传入一个挂载容器
route(app);
window.addEventListener("hashchange", () => {
  // 若 hash 变了则重新路由
  route(app);
});

histrory 模式

需要后端将所有前端路由都渲染到同一页面

  <body>
        <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>
        <div id="app"></div>
        <div id="div404" style="display: none;">not found</div>
        <script src="src/index.js"></script>
  </body>

const app = document.querySelector("#app");
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 routeTable = {
  "/1": div1,
  "/2": div2,
  "/3": div3,
};
function route(container) {
  let number = window.location.pathname;
  console.log("number: " + number);
  if (number === "/") {
    number = "/1";
  }
  // 获取界面
  let div = routeTable[number.toString()];
  if (!div) {
    div = document.querySelector("#div404");
  }
  div.style.display = "block";
  // 展示界面
  container.innerHTML = "";
  container.appendChild(div);
}
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);
  });
}
route(app);
function onStateChange() {
  route(app);
}

memory 模式

不通过地址路由，将路由信息记录到 localStorage 中
适用于移动端等不方便或不能输入地址的地方
html 代码与 histrotry 相同

const app = document.querySelector("#app");
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 routeTable = {
  "/1": div1,
  "/2": div2,
  "/3": div3,
};
function route(container) {
  let number = window.localStorage.getItem("xxx");
  if (!number) {
    number = "/1";
  }
  // 获取界面
  let div = routeTable[number.toString()];
  if (!div) {
    div = document.querySelector("#div404");
  }
  div.style.display = "block";
  // 展示界面
  container.innerHTML = "";
  container.appendChild(div);
}
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("xxx", href);
    // 通知
    onStateChange(href);
  });
}
route(app);
function onStateChange() {
  route(app);
}