1.前端路由解释

浏览器根据路径的变化跳转不同的页面，这里都不会请求服务器
目前有三种模式：

hash
h5 api history
memory

2. hash 模式

解释：任何情况下都能做前端路由，缺点是有个井号不美观

2.1 hash 模式例子

.index.html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>
  </head>
  <body>
    <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="div1" style="display: none">1</div>
    <div id="div2" style="display: none">2</div>
    <div id="div3" style="display: none">3</div>
    <div id="div4" style="display: none">3</div>
    <div id="div404" style="display: none">你要找的内容被狗吃了</div>
    <script src="index.js"></script>
  </body>
</html>

.index.js
// 获取用户想去哪里
let number = window.location.hash.substr(1)
number = number || 1
//给个默认值 重点！！
//获取界面
let div = document.querySelector(`#div${number}`)
console.log(div)
let app = document.querySelector("#app")
//渲染界面
if (div) { div.style.display = "block" } else {
    div = document.querySelector("#div404")
    div.style.display = "block"
}
//展示界面
if (app) app.appendChild(div)
window.addEventListener("hashchange", () => {
    console.log("hash 变了")


    const number2 = window.location.hash.substr(1)
    //获取界面
    const div2 = document.querySelector(`#div${number2}`)
    if (div) {
        div2.style.display = "block"
        //展示界面
    } else {
        div = document.querySelector("#div404")
        div.style.display = "block"

    }
    const app2 = document.querySelector("#app")
    //渲染界面

    app2.children[0].style.display = "none"
    document.body.appendChild(app2.children[0])
    app2.appendChild(div2)
})

2.2 基于例子重复代码优化

.index.js
function route() {
    // 获取用户想去哪里
    let app = document.querySelector("#app")
    let number = window.location.hash.substr(1)
    number = number || 1
    //给个默认值 重点！！
    //获取界面
    let div = document.querySelector(`#div${number}`)
    console.log(div)
    //渲染界面
    if (!div) {
        div = document.querySelector("#div404")
    }
    div.style.display = "block"
    //展示界面
    if (app.children.length > 0) {
        app.children[0].style.display = "none"
        console.log(app.children[0])
        document.body.appendChild(app.children[0])
    }
    app.appendChild(div)

}

route()

window.addEventListener("hashchange", () => {
    console.log("hash 变了")
    route()

})

3.3 路由表

上述的代码中，没有自定义哈希跟对应的路由是一一对应，进一步添加路由表

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 routerTable = {
  1: div1,
  2: div2,
  3: div3,
  4: div4,
};

function route() {
  // 获取用户想去哪里
  let app = document.querySelector("#app");
  let number = window.location.hash.substr(1);
  number = number || 1;
  //给个默认值 重点！！
  //获取界面
  let div = routerTable[number];
  console.log(div);
  //渲染界面
  if (!div) {
    div = document.querySelector("#div404");
  }
  div.style.display = "block";
  //展示界面
  app.innerHTML = "";
  app.appendChild(div);
}

route();

window.addEventListener("hashchange", () => {
  console.log("hash 变了");
  route();
});

3.history 模式

index.js;
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 div4 = document.createElement("div");
div4.innerHTML = "4";
const routeTable = {
  "/1": div1,
  "/2": div2,
  "/3": div3,
  "/4": div4,
};

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() {
  console.log("state 变了");
  route(app);
}

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <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> <a class="link" href="/4">go to 4</a>
    <div id="app"></div>

    <div id="div404" style="display: none;">你要找的内容被狗吃了</div>

    <script src="src/index.js"></script>
  </body>
</html>

解释：相对hash模式美观一点，但是一旦刷新就会返回404，所以需要后端进行配置返回同一个主页

4. memory 模式

把路径存在用户看不进的地方,也就是 localstorage
这种模式适合非浏览器譬如 app

「Vue 」vue中的前端路由

1.前端路由解释

2. hash 模式

2.1 hash 模式例子

2.2 基于例子重复代码优化

3.3 路由表

3.history 模式

4. memory 模式