浅谈Vue和React路由原理

要养成好习惯。

• 先关注
• 点赞
• 收藏

再进行观看哦

简述

其实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 两种路由的底层原理了。