【Vue】vue-router的原理

vue-router是vue单页面应用中的一个路径管理器。

vue单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面。而传统的页面应用,是用一些超链接来实现页面切换和跳转的,每次更新视图都需要重新请求页面,这是我们不想看到的(请求过多)。

vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。所以在vue-router单页面应用中,页面的切换和跳转则是路径之间的切换,也就是组件的切换。

路由模块的本质 就是建立起url和页面之间的映射关系。所以,就出现vue-router,用来管理路径并构建路径和组件的映射关系。

vue-router在实现单页面前端路由时,提供了两种方式:Hash模式和History模式

  • Hash模式:

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。hash(#)是URL 的锚点,代表的是网页中的一个位置,单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页,也就是说hash 出现在 URL 中,但不会被包含在 http 请求中,对服务器(后端)完全没有影响,因此改变 hash 不会重新加载页面;同时每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用”后退”按钮,就可以回到上一个位置;所以说Hash模式通过锚点值的改变,根据不同的值,渲染指定DOM位置的不同数据。hash 模式的原理是 onhashchange 事件(监测hash值变化),可以在 window 对象上监听这个事件。

  • History模式:

History模式充分利用了html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈,在当前已有的 back、forward、go 基础之上,它们提供了对历史记录修改的功能。只是当它们执行修改时,虽然改变了当前的 URL ,但浏览器不会立即向后端发送请求。
不过这种模式要玩好,还需要后台配置支持。你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

参考:

vue-router的原理

浅谈vue-router原理

前端路由简介以及vue-router实现原理

vue-router的使用及实现原理

END

猜你喜欢

转载自blog.csdn.net/Dora_5537/article/details/91358479