要养成好习惯。

• 先关注
• 点赞
• 珍藏

再进行观看哦

简述

其实Vue和React在很多中央，底层原理和语法上差异并不是很大。底层原理更多的是雷同的。就比如说React有JSX，Vue有Template。其实就能够了解成一个货色，就是写法不同。当然咱们明天说的React的路由和Vue的路由也是一样。底层原理其实也差不多。

Hash模式（Vue/React）

其实前端路由真的简略谈谈原理的话并不难，hash模式是在地址前面拼接一个 # 号前面带有的路由地址。就相似于 a 标签的 锚点 。不过还有些不同，浏览器在地址栏扭转的值是 hash 值时并不会触发浏览器申请。并且会触发一个事件 hashchange ，那么这样的话。咱们就能够利用这个 haschange 进行搞事件了，能够通过 hashchange 去解决一些非凡的操作，执行一些状况下才会执行的代码。而 Vue / React 利用的正是这一原理。通过不同的 路由去调用不同的 函数/JS 去生成不同的页面代码。

举个例子：
这是一个hash模式的网址例子

http://www.xxx.com/#/abcd123  

function callBack(e) {
  // 通过event对象去获取以后的路由，来判断下一步要进行的一些操作，当然这里不止蕴含Dom，
  // 其余的操作也是能够的 
  console.log(e.oldURL)
  console.log(e.newURL)
}
window.addEventListener('hashchange',callBack)

目前hash模式反对最低版本是IE8，这也就是为什么都说hash模式的兼容性更好了。其实 React 和 Vue 的hash模式的路由底层就是这么简略的。

History模式（Vue/React）

接下来是History模式，History模式其实简略来说就是咱们常见的那种带有path的地址。
例如：

http://www.xxxx.com/abc/dcde

然而这种模式会造成浏览器从新申请服务器路由，首先去获取服务器相应的path下的文件。若没有则会造成 404 Not Found! 当然这种模式须要服务端进行配合，将路由从新重定向到咱们的打包进去的index.html文件上。
History模式其实很简略，就是ES6中的新增BOM对象History。Vue 和 React 设计的也很奇妙，完满的应用了ES6的新增属性。

其实咱们齐全能够打印一下ES6新增的BOM对象History：

相熟Vue的同学可能发现了，__proto__外面蕴含了 go 办法， back 办法， 还有与Vue类似的 replaceState 办法， pushState 办法

没错， replaceState 和 pushState 其实就是vue中的 replace 和 push ，不过就是Vue的作者将其再进行了封装罢了。

History 存储历史记录是 队列存储 的，也能够了解为一个数组。他也是有 length 属性的。
咱们平时操作 go(num) 其实调用的就是这个History队列外面的历史数据，并找到相应的索引进行一个跳转。

因为IE9才反对ES6，所以History模式并不反对IE9以下版本。
这也就是为什么我之前说Hash模式的兼容更好了。

这就是 Vue 和 React 两种路由的底层原理了。