你必须知道的路由原理

时间 2019-11-08

原文原文链接

`hash`路由

利用hash实现路由切换javascript

<html lang="en">
<head>
  <style> #root{ height: 200px; border: 1px solid red; } </style>
</head>
<body>
  <a href="#/a">跳转到/a</a>
  <a href="#/b">跳转到/b</a>
  <div id="root"></div>
  <script> let container = document.getElementById('root'); window.addEventListener('hashchange',function (e) { console.log(e); container.innerHTML = `当前的路径是${window.location.hash.slice(1)}`; }) </script>
</body>
</html>
复制代码

当经过hash切换路由的时候回触发hashchange事件
经过window.location.hash能够拿到当前页面的hash值

`Browser`路由

利用H5——API实现路由切换css

`history`对象

提供了操做浏览器会话历史的接口html

【1】back跳到上一个路径，做用同浏览器的回退按钮
【2】forward跳到下一个路径，做用同浏览器的前进按钮
【3】go跳到某个路径
- 【3-1】参数相对于当前路径的队列数字，例如go(1) === forword() ,go(-1) === back();
【4】length表示当前路径队列中存储的路径个数
【5】pushState在当前路径队列中增长新的路径，而且跳转到新路径；length + 1
- 【5-1】参数三个history.pushState({name:'新的状态'},'新的标题(已经废弃)','/新的路径')
【6】replaceState在当前的路径队列中用新的替换当前路径；length不变
- 【6-2】参数同pushState

原理

<html lang="en">
<head>
  <style> #root { height: 200px; border: 1px solid red; } </style>
</head>
<body>
  <button onclick="push('/a')">/a</button>
  <button onclick="push('/b')">/b</button>
  <button onclick="push('/c')">/c</button>
  <div id="root"></div>
  <script> let container = document.getElementById('root'); /** * 监听弹出状态的事件(出栈操做) */ window.onpopstate = function (e) { console.log(e); container.innerHTML = e.state.to; } function push(to) { /** * pushState (入栈操做) * 三个参数 1.新的状态对象 2.标题(已经废弃) 3.跳转到的路径 */ window.history.pushState({ to }, null, to); } </script>
</body>
</html>
复制代码

由上图能够看出当点击路由按钮的时候实现了路径的切换
点击浏览器的回退或者前进的时候实现了路径的切换和视图的切换(即触发了window.onpopstate)
可是咱们想要的效果应该是点击路由切换按钮的时候也进行视图的切换，文章前的你确定跟我有同样的想法——绑定window.onpushstate事件，可是很遗憾，浏览器并无给咱们提供这个事件。

优化`pushState` && 实现`onpushstate`方法——实现点击路由切换按钮同时进行视图切换

let oldPushState = window.history.pushState; // 保存原有的pushState方法;
window.history.pushState = function(state,title,url){
    onpushstate(state,title,url); // 调用咱们手写的onpushstate切换视图
    oldPushState.call(window.history,state,title,url); // 调用原有的pushState方法实现路由切换
}
window.onpushstate = function(state,title,url){
    container.innerHTML = state.to || url;
}
复制代码

写在最后

文章主要是从底层的角度剖析了单页面应用路由的实现原理，三大框架的路由原理也是基于这个底层思想实现，后续会为你们带来React-Router的源码解析；若是以为写的还能够帮忙点个👍，😉小生将不胜感激🤘。java

你必须知道的路由原理

hash路由

Browser路由

history对象

原理

优化pushState && 实现onpushstate方法——实现点击路由切换按钮同时进行视图切换

写在最后

`hash`路由

`Browser`路由

`history`对象

优化`pushState` && 实现`onpushstate`方法——实现点击路由切换按钮同时进行视图切换