浅谈前端路由实现原理

1. 前端路由启蒙

什么是路由呢？
答：路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动。路由引导分组传送，经过一些中间的节点后，到他们最后的目的地。做成硬件的话，则成为路由器。路由通常根据路由表——一个储存到各个目的地的最佳路径的表——来引导分组传送。(来自维基百科)
我们每个人上网都会接触到路由器和光猫(调制解调器，虚拟信号变成数字信号，数字变成虚拟信号)。当我们上网浏览各种网页app，我们的请求就被路由器分发至各个服务器，那么分发请求的对象就是路由。

那么前端的路由是指什么呢？
我们在浏览网页的时候经常切换页面，用bilibili来举例，当我们点进一个视频，我们就进入专门播放这个视频的页面。如果每个页面都是一个div，如何知道用户要使用那个页面呢？那就是用网址。
举个例子： 有网址
http://127.00.1/#1 代表展示div1
http://127.00.1/#2 代表展示div2
http://127.00.1/#3 代表展示div3
http://127.00.1/#4 代表展示div4

怎么在一个页面通过URL的不同切换展示内容(这里用div代替)

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

// 获取用户想去哪
const number = window.location.hash.substr(1)   // window.location.hash  是包含块标识符的DOMString，开头有一个“#”
// 获取界面
const div = document.querySelector(`#div${number}`)
const app = document.querySelector('#app')
// 渲染界面
div.style.display = 'block'
// 展示界面
app.appendChild(div)

这样在本地预览网址后加入/#1,便会展示div1，其余同理。
我想通过a标签点击切换显示内容呢？

<!-- hashchange event  当URL的片段标识符更改时，将触发hashchange事件 (跟在＃符号后面的URL部分，包括＃符号 -->
<a href="#1">go to 1</a><br>
<a href="#2">go to 2</a><br>
<a href="#3">go to 3</a><br>
<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>

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

window.addEventListener('hashchange', () => {
  console.log("hash变了");
  const newNumber = window.location.hash.substr(1);
  let newDiv = document.querySelector(`#div${newNumber}`);
  let newApp = document.querySelector("#app");

  newDiv.style.display = "block";

  newApp.children[0].style.display = "none";
  document.body.appendChild(app.children[0])
  newApp.appendChild(newDiv);
})

这样便实现了一个简单的路由跳转，但是有一个bug，用户没有输入 #1 的时候会把报错。
默认路由

let number = window.location.hash.substr(1)
number = number || 1    //  给个默认值  即默认路由

但是当我输入的值不是# 1~4 的时候又报错了。
保底路由(404路由)

let div2 = document.querySelector(`#div${number2}`)
    if (div2) {
        div2.style.display = 'block'
    } else {     // 如果没有现存的页面  就显示404
        div2 = document.querySelector('#div404')
        div2.style.display = 'block'
    }

优化一下代码

function route() {
    let number = window.location.hash.substr(1)
    let app = document.querySelector('#app')
    number = number || 1    // 默认路由
    // 获取界面
    let div = document.querySelector(`#div${number}`)
    // 渲染界面
    if (!div) {     //  如过输入正确的hash
        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()    // 初次进入，执行路由

//   用户改变URL中hash事件
window.addEventListener('hashchange', () => {
    console.log('hash变了')
    route()    // 用户点击，执行路由
})

2. 路由表

上面对的代码虽然实现了最简单的路由，但是还是有待改善

 let number = window.location.hash.substr(1)
 let app = document.querySelector('#app')
 number = number || 1    // 默认路由
// 获取界面

let div = document.querySelector(`#div${number}`)  // 这里我们hash与div的对应

关系过于单一，这种对应关系应该是我们可以改变的才更好
我们可以创建一个路由表

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,
}
 let div = routeTable[number.toString()]  // 根据hash对应路由

3. hash模式、history模式、memory模式区别

hash：上面的实现便是一种hash模式的路由，任何情况下，都可以使用hash模式作为前端的路由，缺点是SEO不友好，因为服务器收不到hash，浏览器不会把#后面的内容发给服务器的。
history：如果后端能将所有前端路由都渲染到同一个页面(不能是404页面)的时候就可以使用history模式，缺点IE8以下不支持。

//  history 模式
const routeTable = {    // 路由表
    '/1': div1,
    '/2': div2,
    '/3': div3,
    '/4': div4,
}
let number = window.location.pathname   // JS只需该这两处即可

<a href="/1">go to 1</a><br>
<a href="/2">go to 2</a><br>
<a href="/3">go to 3</a><br>
<a href="/4">go to 4</a>  <!-- a标签改成跳转/ -->

但是这样会发现页面在跳转时会刷新，用户体验不好。

const allA = document.querySelectorAll('a.link')  //获取页面a标签
for (let taga of allA) {
    taga.addEventListener('click', (e) => {
        e.preventDefault()   // 组织默认事件
        const href = taga.getAttribute('href')
        window.history.pushState(null, 'page 2', href)
        //  通知
        onStateChange(href)   // 触发事件
    })
}

route(app)

function onStateChange() {    // 自定义history变化事件
    console.log('state变了')
    route(app)
}

这样便可以实现history模式的路由了。

memory模式：它的特点是页面信息不在URL后面显示，适合App页面的跳转，reactNative等，缺点没有URL不能分享链接(单机版)

let number = window.localStorage.getItem('xxx')   //这里使用localStorage存储跳转信息
const allA = document.querySelectorAll('a.link')  //获取页面a标签
for (let taga of allA) {
    taga.addEventListener('click', (e) => {
        e.preventDefault()
        const href = taga.getAttribute('href')
        window.localStorage.setItem('xxx',href)
        //  通知
        onStateChange(href)
    })
}