00:00
好嘞,各位在路由的最后给大家说一个问题,就是关于那两个路由器,回到index.js,同学们还记得不?有一个叫做bro,一个叫做哈西RO是吧?我之前呢是这么讲的,我说同学啊,你不用太纠结,你就简单记RO看起来好看一点,哎,都是这种形式,杠A-B-C-D啊,那么哈西RO特呢,看起来就不这么舒服,带一个井号,后边再是杠A-B是吧?哎,杠C-D,那它俩就只是表面这个区别吗?还有什么区别呢?好,那我们给大家形成笔记了,我们读一下啊同学走,把这东西过一遍就可以来第一个,首先它俩底层原理不一样,同学你要知道的是前端路由的原理,就是你点击路由链接引起路径的变化,然后被路由器监测得到对不对,然后你多次改变路径,它是能留下历史记录的,对不对?那么browse theror是如何留下这个历史记录的呢?或者说是如何操作这些路径的呢?其实都。
01:00
不是借助了H5新提出来这个history API,也就是browser ror的底层实现,一直在调这个history对象的一些方法,同学你注意这个history不是我们之前所说的this.props点,然后那个history,这个history同学们是react的封装,明白不?这是react的封装啊,那我这个里边所总结的我这个history啊,是咱们说H5里边自带的一个。啊,React是对他的一个二次封装啊,OK b ror用的是这个东西,正是因为它是H5新提出来的,所以说相对来讲哈,它的兼容性就不那么好,毕竟是一个新的APIIE9及IE9以下版本都用不了bro啊,那么哈希roer就不同了,它底层实现的是靠谁呢?URL的哈希值,也就是哈希RO的实现是这样的,他没有直接去操作,哎,这个黑sir蕊身上的这些API你知道吧,他怎么做的呢?你只要点击的时候啊,我就正常啊,写这种路径,然后后边写杠A,杠B,杠C,杠D,然后呢,你点一次,你再点一次,是不是有两个路径了,那么这种哈希值的路径有一个特点,就是井号后边的东西都不会发送给服务器的,它不认为是一种请求资源的路径,就不会发给服务器,但是这种东西还一个。
02:34
特点就是就类似于你的锚点,同学我说哈希值大家不懂,你就想锚点对吧?同学你点锚点的时候给服务器发请求吗?不发,但是锚点有一个副作用,就是刚好能形成历史记录,对不对?哎,这就是哈西特的底层实现,你要说谁兼容性更好?同学一定是哈希RO特,但是吧,同学话又说回来了,你说你用react,你用view,你用angel了,同学那我就问你一个问题,你能写出一个这么一个项目吗?就是你用angel写的,React写的,或者用view写的,你能兼容到IE6,那是不可能的,因为react这个源码里边的一些写法啊,IE6它就不支持,所以说同学,呃,确实你要对比的话,BRO特啊,这个兼容性可能不如哈希RO特那么的好,因为哈希RO特那那那个井号哈希值那种形式,那是一个非常经典的形式。
03:23
啊,所以说你要非要对比,可能说确实是哈希的这种方式兼容性能好一点,但是一般来说我们用RI react和view做项目呢,也有一些固定的要求,就是你的浏览器版本一般不会低于IE9是吧?嗯,好,底层原理不一样,还有就是URL的表现形式不一样啊,其实这不应该说URL,嗯,精准点应该说pass对吧,因为URL是带着那个HTTP啥的那些东西,对不对?B就直接杠DEMO,杠test,而哈希就是多了这么一个井号啊,还有什么呢?就是刷新后对路由state参数的影响,同学,这特别重要。
04:00
一定要注意这个啊,之前都没跟大家说过,为啥不能说呢?之前咱还没讲路由的state参数呢,对不对,这回讲了,嗯,这回讲了,好同学,我启动一下我的这个项目啊,N PM start走。我目前啊,那个消息123传递参数是不是借助state参数去传的,你看一下效果。MESSAGE123地址栏是不是没有体现,所以说同学我传的什么参数,嗯,什么参数,是不是state参数,那我再问一句,现在我用的是哪个路由器呀,是不是browser好回头。看页面啊同学走刷新一下,呃,输出的东西有点多,我调整一下,找到components,找到header,找到这这一句呢,咱不能要了是吧,然后我找哪一个呢?我找这个啊,找咱们的这个PAY4下的啊,然后找到home下的,找到message,你是不是往detail啊,嗯,好的,来,我在detail里呢,输出这些东西往下滑,在detail里边啊输出pro已经输出了,做个分格说一下谁的pro。
05:11
Detail的好,来瞧效果刷新一下啊,那看一下这是是吧,那我切到这吧,我从头开始来啊,3000点击home,点击message。调一点啊好了,接下来呢,我点击消息一来,同学是不是输出了detail这个组件接收到的props啊,打开我是如何获取参数的呀?location.state是不是拿到这东西的,之前咱就说过,同学,现在我刷新,虽然参数没有在地址栏里边体现,但是你一定要注意,现在我用的是browser这个路由器,是吧?Browser ror,那么这个browser其实是在操作浏览器的history对象,对不对?操作这个history对象,那我想问大家,就算你刷新的话,毕竟浏览器没关吧,毕竟浏览器的历史记录还在吧,那所以说同学这个东西它就不丢,你一刷新瞧着。
06:13
打开其实都不用看,这这是不是还是正常的零一消息一你好,中国呀,嗯,但是如果你用哈希root就不行了,关掉这个页面,我们来到index里边,我不用bro,我用哈希RO,放在这儿等它编译打开。好了,用上哈希RO了,因为井号出现了,对吗?同学们,好了,走起空来打开走message消息一是吧,这也能传,但是就是在你刷新的时候来,同学一刷新,这是不是没了呀?为什么没了呢?你打开location.state你发现是吧?哎,因为哈希RO没有用上这个history这个API,所以说就没有办法有人帮你记着这个事儿,只要你一刷新它就没,因为人家没有这个对象,他没有借助这个对象去保存东西,所以说这是一个最大的影响啊,很多人呢,一直在用路由,其实都不知道哈希roer会有这个问题,来我们读一读belower roer没有任何影响啊,对路由的这个state参数,那主要是刷新对吧?哈希RO刷新后会导致state参数的丢失,这一定要注意啊,啊这写几个感叹号,然后再读第四个备注,就是哈希RO呢,有的时候可以解决一些路径错误相关的问题,对不对?同学想想样式丢失如何处理啊,其中有一个解决办法是不是用哈希RO?嗯,好了,那我们就对比完了,这个BRO和哈希,RO说老师那工作的时候哪个用的多呢?那其实同学你也看了美团等等这些上线的网站,其实还是bro呢用的比较多是吧。
07:50
啊哎,但是如果你要非得揪着兼容性不放,那有的时候呢,你也得考虑用它是吧,嗯,好了,那这一节呢,停一下。
我来说两句