前端路由

路由是什么

路由是用来分发请求

路由模式

hash模式，history模式，memory模式

1.hash模式

任何情况都能使用，但seo不友好（服务器无法获取hash)
我们创建一个id为app的div，然后创建5个div，一开始让它们display:none





    Parcel Sandbox
    



    
    1
    2
    3
    4
    5

我们通过不同的hash，将不同的元素挂在到app上

const number = window.location.hash.substr(1);
const div = document.querySelector(`#div${number}`);
const app = document.querySelector("#app");
div.style.display = "block";
app.appendChild(div);

image.png

 to_1
 to_2
 to_3
 to_4
 to_5

我们创建几个a标签，使它们跳到不同的hash，但是此时不能达到我们的预期，需要监听一个hashchange的事件。

window.addEventListener("hashchange", () => {
  console.log("hash changed");
  number = window.location.hash.substr(1);
  console.log(number);
  div = document.querySelector(`#div${number}`);
  console.log(div);
  app = document.querySelector("#app");
  div.style.display = "block";
  app.appendChild(div);
});

此时即可监听路由的hash变化
封装一下上面的代码，同时处理下404

function route() {
  let number = window.location.hash.substr(1);
  number = number || 1
  let div = document.querySelector(`#div${number}`);
  let app = document.querySelector("#app");
  if(!div) {
    div = document.querySelector(`#div404`);
  }
  div.style.display = "block";
  if(app.children.length > 0) {
    app.children[0].style.display="none"
    document.body.appendChild(app.children[0])
  }
  app.appendChild(div);
}
route()
window.addEventListener("hashchange", () => {
  route()
});

2.history模式

后端将所有前端路由都渲染到同一个页面，但IE8一下不支持

修改一下之前hash路由的代码

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() {
  let number = window.location.pathname;
  number = number || 1;
  let div = routeTable[number.toString()];
  let app = document.querySelector("#app");
  if (!div) {
    div = document.querySelector(`#div404`);
  }
  div.style.display = "block";
  app.appendChild(div);
}

我们创建一个路由表来存放相应的元素
此时我们能够看到路由的切换，但是这样每次都会刷新页面
我们可以先阻止a的默认效果，然后使用history.pushState

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 2",href)
  })
}

此时就可以想修改hash一样修改路由了，不会造成刷新页面

function onStateChange(href) {
  route()
}

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)
  })
}

此时history模式就可以自由切换了

3.memory模式

路径不通过url存储，保存在localStorage,sessionStorage等地方，适合运行在非浏览器中（比如react native，weex）中。
缺点：只对单机有效，不方便分享链接。