路由是什么
路由是用来分发请求
路由模式
hash模式，history模式，memory模式
1.hash模式
任何情况都能使用，但seo不友好（服务器无法获取hash)
我们创建一个id为app的div，然后创建5个div，一开始让它们display:none
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<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;">4</div>
<div id="div5" style="display:none;">5</div>
<script src="src/index.js">
</script>
</body>
</html>
我们通过不同的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
<a href="#1">to_1</a>
<a href="#2">to_2</a>
<a href="#3">to_3</a>
<a href="#4">to_4</a>
<a href="#5">to_5</a>
我们创建几个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）中。
缺点：只对单机有效，不方便分享链接。
网友评论