关于前端:浅谈Vue和React路由原理

6次阅读

共计 1327 个字符，预计需要花费 4 分钟才能阅读完成。

要养成好习惯。

先关注
点赞
珍藏

再进行观看哦

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

其实前端路由真的简略谈谈原理的话并不难，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 模式，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 两种路由的底层原理了。

正文完