建议收藏!!VueRouter原理和ReactRouter原理

简述


其实Vue和React在很多地方,底层原理和语法上差别并不是很大。底层原理更多的是相同的。就比如说React有JSX,Vue有Template。其实就可以理解成一个东西,就是写法不同。文章 【今天学习了吗?hash 路由和 history 路由简介】简单介绍了vue的两种路由模式,但是其背后的原理是什么呢?这里和React路由一起介绍一下!希望对读者有所帮助 ~~~


更新视图但不重新请求页面,是前端路由原理的核心之一!!


Hash模式

hash 虽然出现在 url 中,但不会被包括在 http 请求中,它是用来指导浏览器动作的,对服务器端完全无用,因此,改变 hash 不会重新加载页面。

可以为 hash 的改变添加监听事件:window.addEventListener('hashchange',callBack)

每一次改变 hash(window.localtion.hash),都会在浏览器访问历史中增加一个记录。利用 hash 的以上特点,就可以来实现前端路由"更新视图但不重新请求页面"的功能了。



我们就可以通过 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模式,即http://www.xxxx.com/abc/dcd


这种模式会造成浏览器重新请求服务器路由,首先去获取服务器相应的path下的文件。若没有则会造成 404 Not Found! 当然这种形式需要服务端进行配合,将路由重新重定向到我们的打包出来的index.html文件上。


History模式其实就是ES6中的新增BOM对象History。Vue 和 React 设计的也很巧妙,完美的使用了ES6的新增属性。ES6新增的BOM对象History如下:


20316322-a9b1585b2694c9b6.webp


proto里面包含了replaceState 和 pushState方法。replaceState 和 pushState 其实就是vue中的 replace 和 push ,不过就是Vue的作者将其再进行了封装了。


History 存储历史记录是 队列存储 的,也可以理解为一个数组。它也是有 length 属性的。
我们平时操作 go(num) 其实调用的就是这个History队列里面的历史数据,并找到相应的索引进行一个跳转。


因为IE9才支持ES6,所以History模式并不支持IE9以下版本。所以说Hash模式的兼容更好。


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


作者:不是Null
链接:https://juejin.cn/post/7031820537676611614

0 个评论

要回复文章请先登录注册