路由 研究与理解

孔秀
• 阅读 1218

在react 实践中,有用到路由,路由用起来 很简单,效果也明显,但是并没有去想 路由 究竟是什么东西。
于是就开始了研究的道路,

首先路由有2种,hash路由和history路由

1.hashRouter
锚点 浏览器 中url 后面#xxx 部分,该部分 在http请求时会被忽略,用于跳转到页面 对应锚点的位置的。就是window.location.hash,可以通过该变量修改当前锚点
will切换路由,处理:什么也不做,浏览器默认行为,
就是说在我们点击<a href='#xx'></a>,浏览器地址就会发生变化,此时只要监听 hash变更 就可以处理 路由变化的事件了
即 hashChange

2.historyRouter
history 就是浏览器的访问记录 这篇阮一峰的讲解 十分到位 History对象
概括下:
借用下react生命周期用到的概念,will和did
will切换路由,处理:pushState
did切换路由,处理:onpopstate

在研究完这2个路由之后,看了下网上的评论二者没有什么 主要的区别,这块后面随着深入使用,对其二者使用区别理解应该更丰富
目前网友们的评论 和 自己的理解 就是:
1.history路由更美观
2.如果页面中有锚点的 设计,则应该使用history路由
3.采用history路由,由于会变更浏览器url,并且是会进行请求的url,需要做内部请求转换特殊处理。hash路由则不用,因为浏览器请求时会忽略后面hash部分 即#xxx

点赞
收藏
评论区
推荐文章
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
4年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Souleigh ✨ Souleigh ✨
4年前
10个略骚的 Vue 开发技巧
路由参数解耦一般在组件内使用路由参数,大多数人会这样做:exportdefaultmethods:getParamsId()returnthis.$route.params.id在组件中使用$route会使之与其对应路由形成高度耦合,从而使组件只
海军 海军
4年前
Vue | 路由守卫面试常考
前言最近在整理基础,欢迎一起交流学习<br/结尾有彩蛋哦!🎉🎉🎉VueRouter路由守卫导图目录1.路由守卫分类2.全局路由守卫3.单个路由守卫4.组件路由守卫5.路由守卫执行的完整过程<hr/路由守卫分类全局路由单个路由独享组件内部
Wesley13 Wesley13
4年前
ThinkPHP6.0学习笔记
ThinkPHP路由by:Mirror王宇阳Thinkphp的路由的主要作用是为了让URL地址更加美观、简洁、优雅……;设置路由对URL的检测、验证等操作提供了极大的便利性;路由功能是默认开启的config/app.php文件中设置:'with_route'true;路由
good123 good123
4年前
RIP路由协议
动态路由定义:各个路由器之间运行某种协议(算法),通过收发数据包的形式获取未知路径(路由器交换信息)。动态路由的特点减少了管理任务占用了网络带宽动态路由协议概述路由器协议:路由器之间用来交换信息的语言。度量值:跳数、带宽、负载、时延、可靠性、成本路由器通过度量值来确定最优路由路径收敛使所有路由表都达到一致状态的过程静态路由和动态路由的关系网络中静态路由和动态
Wesley13 Wesley13
4年前
10分钟彻底搞懂单页面应用路由
上一次,跟大家科普了小程序的自定义路由routes,开启了路由之旅;今天,顺势就单页面应用路由,跟大家唠个五毛钱,如果唠得不好……退…一块钱?单页面应用特征假设:在一个web页面中,有1个按钮,点击可跳转到站内其他页面。多页面应用:点击按钮,会从新加载一个html资源,刷新整个页面;单页面应
Stella981 Stella981
4年前
React路由
在web应用开发中,路由系统是不可或缺的一部分。在浏览器当前的URL发生变化时,路由系统会做出一些响应,用来保证用户界面与URL的同步。随着单页应用时代的到来,为之服务的前端路由系统也相继出现了。有一些独立的第三方路由系统,比如 director(https://www.oschina.net/action/GoToLink?urlhttp
Stella981 Stella981
4年前
Dubbo 路由机制的实现
!(https://oscimg.oschina.net/oscnet/up76daef0a0724de6bbc213914b2d334683c1.png)Dubbo路由机制是在服务间的调用时,通过将服务提供者按照设定的路由规则来决定调用哪一个具体的服务。路由服务结构Dubbo实现路由都是通过实现RouterFactor
Stella981 Stella981
4年前
Angular路由参数传递
一、路由时传递参数的方式1、在查询参数中传递数据,如//前台页面<arouterLink"/product"queryParams"{id:1}"商品详情</a//后台页面获取参数exportclassProductComponentimplementsOnInit{
Linux策略路由详解
概述在Linux中,我们通常使用route命令来做路由信息的管理。但是该命令仅仅只能用于基本路由信息的管理,面对功能更加强大的基于策略的路由机制,route命令就显得捉襟见肘。在传统路由算法中,只能基于目的地址进行路由选择。但是如果对
孔秀
孔秀
Lv1
敬自己一杯酒,祝来年更顺。
文章
4
粉丝
0
获赞
0