这是我参与更文挑战的第9天,活动详情查看: 更文挑战
概念
路由就是SPA(单页应用)的路径管理器,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来
。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。
路由模块的本质
:就是建立起url和页面之间的映射关系
。
在vue的路由配置中有mode选项,最直观的区别就是在hash模式下的地址栏里的URL夹杂着‘#’号 ,而history模式下没有。vue默认使用hash。
mode:"hash";
mode:"history";
hash
原理
在 url 中的 # 之后对应的是 hash 值, 其原理是通过hashChange() 事件监听hash值的变化, 根据路由表对应的hash值来判断加载对应的路由加载对应的组件
优点
- 只需要前端配置路由表, 不需要后端的参与
- 兼容性好, 浏览器都能支持
- hash值改变不会向后端发送请求, 完全属于前端路由
缺点
- hash值前面需要加#, 不符合url规范,也不美观
分析
当 URL 改变时,页面不会重新加载。 hash(#)是URL 的锚点,代表的是网页中的一个位置,单单改变#后的部分,浏览器
只会滚动到相应位置,不会重新加载网页
,也就是说 #是用来指导浏览器动作的,对服务器端完全无用,HTTP请求中也不会不包括#
;同时每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用”后退”按钮,就可以回到上一个位置;所以说Hash模式通过锚点值的改变,根据不同的值,渲染指定DOM位置的不同数据
history
优点
- 符合url地址规范, 不需要#, 使用起来比较美观
缺点
- 在用户手动输入地址或
刷新页面时会发起url请求
, 后端需要配置index.html页面用户匹配不到静态资源的情况, 否则会出现404错误 - 兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持.
分析
利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。pushState()方法可以改变URL地址且不会发送请求,replaceState()方法可以读取历史记录栈,还可以对浏览器记录进行修改。 这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。
总结
一般情况下两种路由的模式都可以使用, 具体的使用场景可以结合以上两种模式的优缺点进行选择.