Vue Router 路由实现思路

路由包含的概念

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。

Vue Router 路由实现思路

路由包含的概念

hash 模式

history 模式

memory 模式

推荐阅读更多精彩内容