路由包含的概念
1.路由
只要满足一对多的关系就叫分发， 分别发送到各个地方。路由就是分发请求，路由器就是分发请求的东西。
2.hash:就是#1
3.默认路由
number = number || 1 //如果number不存在就给个保底值1
4.保底路由:404路由
if(div){
div.style.display="block"
}else{
div=document.querySelector("#div404")
div.style.display="block"
}
概念5:嵌套路由
需求:https://xxx/#1/3 表示要跳转到子路由1.3 接收一个参数container，表示要替换的根。要route时说一下，要route到哪个目录下，加一个参数container，表示根在哪里。
hash 模式
根据用户URL后接的hash是#x 比如http://127.0.0.1/#1以此来判断用户想去的界面，界面用div代表。#1代表界面1即Div1
条件：
任何情况下你都可以用hash做前端路由，但是SEO不友好。
缺点:SEO不友好。 服务器收不到hash，因为浏览器是不会把#之后的内容发送给服务器。所以不管你是访问https://www.baidu.com/#1还是https://www.baidu.com/#xxx对百度来说都是同一个内容，永远只展示默认路由https://www.baidu.com。根本没法收录你的内容，这就叫SEO不友好。
但也不是绝对的,google的hashbang可以让google能识别#,需要你的服务器做些配置:加!,这样google就会认为是不同的页面。例如https://www.baidu.com/#!1
<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;">
4
</div>
<script src="src/index.js"></script>
</body>
//获取用户目标地址
let number = window.location.hash.substring(1); //去掉#
let div = document.querySelector(`#div${number}`); //获取div
let app = document.querySelector("#app");
if (div) div.style.display = "block"; //渲染界面
if (app) app.appendChild(div); //展示界面
//监听hash变化
window.addEventListener("hashchange", () => {
console.log("hash changed");
const number2 = window.location.hash.substring(1); //去掉#
const div2 = document.querySelector(`#div${number2}`); //获取div
const app2 = document.querySelector("#app");
div2.style.display = "block"; //渲染界面
app2.children[0].style.display = "none";
document.body.appendChild(app2.children[0]); //清空上一次的界面
app2.appendChild(div2); //展示界面
});
路由表
自定义hash与div的关系
const div1 = document.createElement("div"); //JS创建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() {
//获取用户目标地址
let number = window.location.hash.substring(1); //去掉#
let app = document.querySelector("#app");
number = number || 1; //如果number不存在就给个保底址1
let div = routeTable[number.toString()]; //获取div
//渲染界面
if (!div) {
div = document.querySelector("#div404");
}
div.style.display = "block";
app.innerHTML = "";
app.appendChild(div); //展示界面
}
route();
//监听hash变化
window.addEventListener("hashchange", () => {
console.log("hash changed");
route();
});
history 模式
条件1.后端将所有前端路由都渲染同一个页面(不能是404)
条件2.不需要兼容IE8以下。
只要后端能实现需求:不管你请求https://www.baidu.com/#1还是https://www.baidu.com/#xxx都得到同一个页面https://www.baidu.com，而且不需要兼容IE8以下，那你就可以使用history模式。
window.location.pathname默认会有/
index.html
<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>
-----------------------
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);//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");//获取所有a标签
//遍历，每次点击时篡改它的行为:阻止所有a标签的默认动作,不要自动刷新
for (let a of allA) {
a.addEventListener("click", e => {
e.preventDefault();
const href = a.getAttribute("href");//每次点击时获取href值
window.history.pushState(null, `page ${href}`, href);//在不刷新页面情况下变更URL
//通知
onStateChange(href);//把最新的路径给他
});
}
route(app);
function onStateChange() {
console.log("state 变了");
route(app);
}
memory 模式
memory模式用一个对象来存储你的东西。
hash、history模式都是把数据存在URL，URL一变，页面就要变。memory是存到localStorage里。
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() {
console.log("state 变了");
route(app);
}
hash、history、memory三者区别
hash、history都是把路径存在url上，只不过一个是URL的哈希，一个是URL的路径。memory不用URL，前端一般放在localStorage，移动端APP放在本地数据库里面。
memory缺点是没有URL,只对单机有效，是单机版的路由，分享无效。hash、history可以记录你的信息，所以你可以分享你的URL。
