Vue Router 前端路由实现的思路

Vue Router 前端路由实现的思路

路由器(面试题)
一.前端路由是什么？
二.hash模式? history模式? memory模式?
三.VueRouter源码

一.前端路由是什么？

路由是什么？
路由器,如果你家里有1个以上的人要上网就需要路由器。
你要上网就需要连接到路由器上，路由器要连接到电信/联通公司，电信公司会出售一些网络IP或端口，百度就会购买这些IP(大概会购买几千个IP)作为它的服务器，腾讯也会购买它的IP，抖音同样也要购买它的IP。
你连路由器，路由器看你想连哪里，比如你想连百度，它就会把包发给百度。当你打开抖音时，它就会把你这个信号发到抖音。只要满足一对多的关系就叫分发， 分别发送到各个地方。路由就是分发请求，路由器就是分发请求的东西。

实例1:实现路由router
需求:根据用户URL后接的hash是#x 比如http://127.0.0.1/#1以此来判断用户想去的界面，界面用div代表。#1代表界面1Div1

index.html
<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>
<div id="div404" style="display: none;">你要找的内容被狗吃了</div>

index.js
//console.log(window.location.hash) //#1
let number = window.location.hash.substr(1);
number = number || 1
//console.log(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 number = window.location.hash.substr(1);
  let div = document.querySelector(`#div${
     number}`);
  if (div) {
   
    div.style.display = "block";
  } else {
   
    div = document.querySelector("#div404");
    div.style.display = "block"