养成好习惯。先关注点赞和收藏，再看。简而言之，其实Vue和React在很多地方，底层原理和语法差别不大。基本原则大同小异。比如React有JSX，Vue有Template。其实可以理解为一个东西，就是写法不一样。当然，React的路由和我们今天说的Vue的路由是一样的。基本原理实际上是相似的。哈希模式（Vue/React）其实前端路由真的很简单，讲原理也不难。hash方式是在地址后面拼接一个#号的路由地址。类似于a标签的锚点。但是，存在一些差异。当地址栏中更改的值为哈希值时，浏览器不会触发浏览器请求。并且会触发一个事件hashchange，所以是这样的。我们可以使用这个haschange来做事情。我们可以使用hashchange来处理一些特殊的操作，执行只有在特定情况下才会执行的代码。而Vue/React正是应用了这个原则。使用不同的路由调用不同的函数/JS，生成不同的页面代码。例如：这是一个哈希模式的URL示例http://www.xxx.com/#/abcd123functioncallBack(e){//通过事件对象获取当前路由，决定下一步做什么step操作，当然不仅仅包括Dom，//其他操作也是可以的byhashmode是IE8，这也是为什么说hash模式的兼容性更好的原因。其实React和Vue的hash模式的路由底层就是这么简单。历史模式（Vue/React）之后是历史模式。其实History模式就是我们经常看到的带有路径的地址。例如：http://www.xxxx.com/abc/dcde但是这种方式会导致浏览器重新请求服务器路由，先去获取服务器对应路径下的文件。否则会导致404NotFound！当然，这种形式需要服务器的配合，将路由重定向到我们打包好的index.html文件中。History模式其实很简单，就是ES6中新增的BOM对象History。Vue和React也设计的非常巧妙，完美的利用了ES6的新属性。其实我们可以打印出新的BOM对象ES6的历史：熟悉Vue的同学可能会发现__proto__包含go方法，back方法，replaceState方法和Vue类似。pushState方法是对的，replaceState和pushState在vue中其实就是replace和push，只是vue的作者对它进行了重新封装。historystorage历史存储在队列中，也可以理解为数组。他还有一个长度属性。我们通常操作go(num)来实际调用History队列中的历史数据，找到对应的索引进行跳转。因为IE9只支持ES6，所以History模式不支持IE9以下的版本。这也是为什么之前说Hash模式的兼容性更好的原因。这就是Vue和React路由的底层原理。
