00:00
好嘞,各位,在大家对SPA还有路由有了一定的理解之后呢,按照课件上的顺序啊,就应该给大家说说哎,React router的具体使用了,但是呢,我想这样,先别说这儿,咱再说点别的,就是前端路由到底怎么实现我刚才所说的那个监测的呀?为什么点击你这种链接就不会实现页面的跳转,引起页面刷新呢?对吧?那怎么实现的点击你的这种链接就能把地址栏变成杠home而不是home.html呢?那到底又是谁监测到的,它怎么监测的呀?靠着谁监测的呀?是吧?然后才能展示这个呢?是吧?给大家简单说一下前端路由的工作原理,其实啊,同学,前端路由他也得靠着一个人,就是浏览器的历史记录叫history,如果没有了history,浏览器没有历史记录,那我们前。
01:00
前端路由呢,其实也没有办法非趁好的工作,OK,那来这样同学,我们打开一个文件,我提前给大家准备好的,就是辅助大家理解这个前端路由的啊,那在哪儿呢?在这儿啊,同学找到我给你的资料,找到其他这里边有一个东西叫前端路由的基石history,如果没有了history,那么前端路由呢,就基本上就没有办法非常棒的工作了,OK,那这样我们摁住这个文件,然后拖到我的工程里边来,同学,我一会儿呢,不放在这个工程里,好吧,我不放在这儿,最后我还要把它删掉的,为啥?因为它不属于我们整个讲课的范围之内,是我给大家扩展的一个小东西,所以说我放在这儿了,好吧,哎,需要的话呢,回头你自己再去看一看,好不?你发现同学所有我给你扩展性的东西都放在其他里了,对不对,哎,好关掉同学呢,这样我脚手架呢,是停掉的状态啊,我给它停掉,脚手架停掉了。
02:00
同学,这个文件跟脚手架不发生任何的关系,一会儿我想看这个文件,直接右键浏览器打开就行了,是吧?我们观察一下啊,这个文件呢,长什么样子啊,先看一下走,那你注意观察啊同学,这里边有一个诶,好像是A标签一样的链接,这有一个按钮,这有一个按钮有后退啊回退有前进,那这是干嘛的呢?跟大家说一下啊,在这个小DEMO里边呢,我们就能演示出来前端路由到底是怎么靠着history工作的啊,那么大家都知道啊,我们这个前端里面呢,有一个DOM对不对,还有一个叫做报M对不对,一个鲍M,一个报幕,其实鲍姆的身上呢,就有一个历史记录这么相关的一个东西,鲍M不是浏览器对象嘛,对吧,里边就有一个history,好,其实呢,前端路由借助的就是他身上的history,但是呢,同学,我们程序员呢,一般不直接自己用最原始的语法去操作。鲍姆身。
03:00
成的那个history知道吧,同学,Window是不是盗对象啊,Document是不是盗对象,咱所说的那个盗对不对?哎,那所以说你可以看一下嘛,同学你打开一个新的页面啊,打开它的控制台啊,我稍微给大家放大一点啊,给它清掉,然后呢,同学我输出点东西,Window啊,Window window是不是代表报幕啊,Window点,然后这里面有个history,同学你看是不是有,哎,有这么一个东西,那也是可以操作的啊,它可以对浏览器的路径啊,历史记录啊进行一些修改啊和替换,但是我们程序员往往不直接操作它,为啥呢?它原生的这些API不太好用啊,所以说我们借助了一个人啊,借助谁去操作呢?回到代码当中看,这同学我借助了这么一个东西叫history,哎呀,同学,这history可是有点多,对不对?来,我们捋顺一下,在报幕浏览器对象身上就有一个history这么一个属性,专门用于管理浏览器的路径啊,历史记录。
04:00
啊,这些东西好,我们可以直接操作,但是直接写起来麻烦,我们借助了一个库去操作,这个库叫什么名字啊,history.jsok,好,那么页面上呢,我给大家写了这么几个东西,我们看一下啊,这是A标签,剩下的这些全都是按钮,那同学啊,你注意观察,我先点一下这A标签,你看看能有什么变化啊,首先呢,我得验证一个事儿,就是我点击这种A标签,它不会触发页面的跳转,来我们回到代码当中,同学你观察这个就可以啊,咱一点一点看啊,就看这。是A标签不是有没有指定往哪跳,指定了是不是往艾特硅谷那跳啊,但是与此同时,我是不是还给他指定了一个事件,而且你注意click事件,它前面加了一个return。然后诶,他去调用这个东西,Return这个是啥意思呀,就是return它的返回值是吧?哎去调用这个push,那来吧,那得调用这个push push在哪呢?在这呢啊push说老师push干嘛的呢?你看你是不是传了一个路径叫杠TEST1,那这就接到这个路径了,说老师那这是干嘛呢?history.push那我说一下啊,这个history在这儿定义的。
05:16
哎,同学,我问一下,这是我定义的history对吗?那我再问你同学,那个鲍姆身上是不是也有个history,说老师,那他俩什么关系呢?我所定义的这个history,最终最终它也是操作了鲍姆身上的那个history,说师,那为什么我们不直接用呢?刚才已经说过了,最后说一遍直接操作那个语法写起来不舒服,太繁琐了,所以说我们借助这个人,OK,那这个人哪出来的呀?嗯,就这个history词蕊哪出来的呀?是你所引入的这个库,哎,这个history.js,然后有一个方法叫做create browse history,这会儿呢,大家先别纠结,哎,反正你就知道第16行能创建出来一个history啊,能创建出来一个history对象就得了啊,这嘴有点瓢了啊,捋捋走,哎,也就是说同学们,咱读到16行就知道它有一个history对象就得了,说老师呢,下边我看你还注掉一个,这是咱一会儿要说的啊你。
06:17
创建一个哎浏览器啊,History对象对不对,好了,那么history.push是干嘛呀。就是往历史记录里边添加一条数据,同学,Push方法你应该比较熟悉,数组上是不是有个方法叫做push,是不是往数组里边推入一个元素啊?那这个的push就是往浏览器的历史记录中推进去一条数据,那推进的那条数据是谁呢?是你传过来的路径,你传过来的是谁呢?TEST1,那同学,你发现我这还写了一个return false,这什么意思呀?同学,简单点说我这个。哎,加上这个return false就可以达到一个目的,禁止A标签跳转,A标签已经不能再跳转了,纵使你写了HRA,他也不会跳转的,它直接只是响应click,而且你这个动作啊,你只要一点这个A标签,你就触发了它的click时间,那就调用了push,就把你的杠test一传进来了,就往浏览器的历史记录里边推进去了一个最新的数据,就是杠TEST1。
07:22
啊,你推进去的最新一条数据,那就是目前正在展示的这一条,对不。那你想想吧,同学一个一个往里边推,那你最后一个推进去的是不是就是目前你正在看的页面呀?哎,好了,来你注意看啊,走同学不会引起页面跳转,如果页面真的跳转了,那同学来我给你看一下,我不给他指定on click行吗?我这不写啊,那你看一下,来回到这儿,你看我点的时候找。怎么样,是不是跳到咱学校的官网了,哎,那我点后退呢,是不是能回来,哎好,由于我这么一折腾嘛,就形成了一些历史记录,所以说给它关掉,我重新来,我把代码呢也撤回来,这回行吧,哎,这回你再看啊同学它就有意思了,等你再点push test1的时候,我还没点呢,啊等你点的候,你就会发现页面再也不跳转了,而且最主要的是啊,同学他把浏览器历史记录给改了,你看一下啊,当我点击的时候走你哎咋样同学咋样,咱刚才在这个里边咱咋说的,我说同学有一种特殊的链接,你点完了之后不会实现页面的跳转,它只是把这个路径改了,被别人监测到了,诶监测到之后呢,然后就可以进行匹配的,给你展示哪个组件对不对?同学,那展示哪个组件,你都提到组件这概念了。
08:42
同学,我问一下脱离react能说组件这概念吗?是吧,不行,哎,那所以说咱们不去考虑它怎么进行匹配的啊,说你的是home,然后我就给你展示home组件,咱不考虑这个过程,但是有一个过程咱得考虑,就是我这如果变成了杠home,你到底是咋监测到的呀,对不对?哎,来他是这么检测到的同学。
09:06
我重新再给你演示一遍啊,回到这个里边,右键打开,同学,来到控制台啊,刷新一下,我咋不能前进也不能后退呢,因为你没形成任何的历史记录,对不对,你的历史记录里只有一个嘛,只有一条嘛,你怎么前进,你怎么后退,对吧?好了,同学你注意看啊,当我点击push test1的时候,走起来吧。兄弟,我问一下。这后退按钮是不是亮了,证明你可以后退,你能后退的意思就是浏览器的历史记录里边是不是多了一条记录?那条记录是谁呀?就是他,而且最主要的是同学来来来来来,刚才不是这路径吧,现在是这路径吧,你发没发现人家监测到了,嗯,请求路径,诶变化了,而且同学我问一下人家能不能拿到你的杠TEST1能不能拿到,能说老师我就想知道你这段代码咋写的呢?啊在这呢,回到代码当中,划到最下方非常简单,你就借助history这个对象里边的一个listen方法,Listen什么意思?同学们监听监听谁呀?
10:13
Location,如果路径发生了变化,那么就输出这个,也就是说listen所指定的这个回调函数,我问一下什么时候执行,只要路径发生变化就执行,对吧?哎,而且能把最新的路径是不是给你输出,同学呢,我问一下你觉没觉得在这儿我就已经实现了一个大概的前端路由,你觉没觉得同学们前端路由大概的流程就开始跑通了,来那你注意看一下啊同学,我刷新。我现在点击的就属于什么链接了,是不是导航链接,是不是引起路径的变化,然后是被别人监测的到那剩下那就是更详细的事儿了呗,人家匹配组件了呗,那咱这那你看咱这里边你看我就写这么一个点ATM脱离react,我也没有办法进行组件的匹配吗?啊说老师再写下去,那同学也行,我再写下去,把这个组件的匹配也给你写完,把路由里的Switch readrect等等这些with root全写完的同学,那你就恭喜我吧,是吧,我已经自己动手完成了一个前端路由库是吧?哎,那不是说分分钟就能写完的是吧?哎,回来来到这儿,你看你一点这就变,这就监测,剩下的事交给人家人一匹配组件,那不就完事了吗?对吧,说我说那这一个按钮就够了呀,那你还演示这些干嘛呢?那我想给你演示的是什么叫做push,什么叫做re replace,那说说啊,同学浏览器的历史记录啊,是一个站的结构。
11:40
啊,我关掉这个网页呢,重新给大家演示一下啊,同学们你注意浏览器的历史记录啊,是一个站的结构,我就给你画一个站,那么目前这个站呢,里边只有一条数据,就是这个。什么前端路由的基石,哎,就是这个路径历史记录吗?他得记录每一条的这个路径啊,在这儿它其实现在就已经有了第一条的记录,我给他编个号行吧,同学,我给他编一个编号啊,编号叫做一好了,完这里边他不得记住一些路径吗?他是这么记的,就是什么什么什么什么什么啊,什么什么什么什么啊,最后点,然后是history啊,完了点HTML,好吧,我这稍微有点溢出去了啊,大家这个哎就看一下哈,明白这意思就行,然后你注意同学。
12:27
我是不是点了TEST1,而且我做的是什么动作呢?是push是往里边推一条,那所以说呀,同学在这儿,他就又形成了一条记录,我给它编号为几呢?为二,那这二里边记录了就是什么什么什么什么什么,然后后边是杠啥呀。TEST1如果你再点PUSH2,你告诉我啥意思?同学,那就是又推进去一条,我给他来个编号叫做三,诶就是什么什么什么什么什么什么啊杠T2同学,那你说处于占顶的三是不是处于占顶,谁处于占底呀,占底是不是一呀?同学,知道吧,有一个结构叫做占啊,叫做占啊占结构好哎,那你说占顶的是三,占底的是一,那也就意味着同学们占顶的那条记录啊,我这画笔撤不回来了,只能撤到这儿了,那我就写上吧,来走同学,占顶的一定是你目前正在看的对不对,当你点击浏览器的后退按钮的时候呀,它就把三出站。
13:31
然后二就露出来了,你就看到二了,你再点后退呢,它就把二出战,哎,然后一就露出来了,等你再点前进呢,那就是哎,再把二放回来,再把三放回来,所以说浏览器的历史记录呢,是一个站的结构,那我们验证一下呗,好了同学啊,注意看,刚开始是这个,我也不能后退,因为没有路可退,对吗?点击TEST1还没点呢啊一二三点同学是不是亮了,啥意思,就你有后悔药可以吃了,你可以再回去啊,我不回去我再继续点同学二是不是又放进来了,你每一次路径的改变,你放心,人家这都能监测得到对不对,你这打开你看都能监测得到是吧?好嘞,来把这关掉,那同学现在我想后退,你说我在一点回回哪儿,目前占顶的是TEST2再点,是不是一再点呢?是不是回到这,哎,你看是可以前进和后退的,这是push操作,72同学还有一个操作叫做re replace,这啥意思呢?我给大家说一下啊,其实还是一个站的结构,然后你注意观察啊,首先第一条记录呢,推进来了,第一条谁呢?就是你现在所处的这个路。
14:32
就什么什么什么什么什么完了history.atl我写上什么什么什么啊,然后是history.atl这是第一条,然后呢,你注意看啊,你点击。这个按钮,那你告诉我吧,同学你说这玩意儿啊,它是不是形成第二条记录了,由于是push推入的这个动作,那么所以说呢,在历史记录里边就留下这么一个记录啊,我就简写了杠TEST1对吧,然后你再点第二个按钮,那么就形成了第三条记录,那就是谁呢啊三点,然后是杠T几呢二同学我想问一下,如果你再点三呢,你注意了。
15:13
这个TEST3呢,可不是push的动作,它是replace replace啥意思呀,叫替换,如果你点了REPLACE3的话,同学啊,Replace test3的话,那么它就不是说再压入一条,明白不是把占顶的那一条啊,进行一个替换的动作,也就是说这哥们儿啊,之前所放入这个就被替换了,那换成了谁呢?啊,三不能勾T2给他干掉,哎,就被替换了,那替换成了谁呢?诶,替换成了这个人就是你刚才所点的杠TEST3,那所以说我问大家,你说TEST2的记录是不是就没了呀?那如果你站在TEST3,你点的是replace这种动作的情况下,如果你点后退,我问一下会回到TEST2吗?不会,会直接回到一,因为二呢已经被替换掉了,如果你再点,那我问大家是不是回到这儿啊?哎,那我们测试一下到底是不是这样的呢?我给它关掉。
16:14
好,新开一个走。来注意看啊,控制台呢,也给大家打开刷新,来注意走一走二,目前是一压进去,二压进去,等我再点这个东西的时候,我问一下大家二是不是被替换了,走,其实在这你是看不出来到底是替换还是push的,对不对?好,那同学啊,我问你,现在我想后退,你说会回到二吗?根本不会走,是不是回到一,哎,由于一刚才放的时候不是替换,所以说你再回呢,那就回到这儿了,对不对,前端路由的基石history是吧?哎,OK,所以说想说明白这么一个问题,说老师你下边怎么也有回退和前进呢?那我告诉大家呀,你不仅仅说只能靠浏览器的这个前进前进前进,其实你自己可以写的,同学,你只要把这个人牢牢的握在你手里边就是它,你只要把history对象握在你手里边,哎,对,就是鲍姆身上的那个history,你只要把鲍姆身上的那个history你握在手里,对浏览器路径以及历史记录的操作,你。
17:17
想怎么操作就怎么操作,你是push行,你是PL也行,你是回退也行,前进也行,你比如说同学来走回退回退是吧,前进前进,老师那这咋写的呢?非常简单,同学这些代码你不用去记,咱们就是看一下,其实同学我觉得这些代码如果你真学的话,说老师我打算把它记住,我觉得对于学习框架的你来说也是分分钟的事儿,但是我们没有必要去记它,我们等学完路由的时候,记住路由身上的那些就可以了,OK啊好,那同学你看一下,当你点击回退按钮的时候啊,它掉的是back,当你点击前进的时候呢,它掉的是forward前进,那back方法呢,在这儿呢?history.go back就是后退啊,Forward呢,History read.go forward就是前进。同学觉没觉得没想进,一个不小心记住了是吧?哎,这个呢,就是前端路由实现的基石,同学,如果这个小DEMO实现不了,前端路由也是没有办法工作的,一句话,同学,前端路由也得靠谁鲍姆。
18:17
啊,他身上的那个history对吗?哎,好了,那最后补一个小点,同学就是这个history啊,它有两种工作模式,那如果你写的是这一种啊,我给大家写一个注释,其实这个呢,就是属于方法一,方法一呢,它是直接使用什么呢?它是直接操作是吧?哎,直接调用吧,或者直接使用吧,直接使用history身上的API啊,这个history呢啊是H5呢提出来的啊,咱这么写叫做直接使用啊,H5推出的,推出的history身上的API,也就是说同学对history的各种操作,history.push.pl其实那都是H5最新提出来的,那是一个新的东西,有些极个别的浏览器比较老的是不支持操作history的。
19:17
它会不会留下历史记录呢?等你去点网站,点网站会,但是这个历史记录不允许你自己通过history sir去操作在某些旧的浏览器上,所以说这是方法一,其实还有一个就是方法二,我把这个呢,第一个给它注掉,我把第二个打开,同学你看它叫做什么,它叫做哈y history,刚才那个叫做browser history,你就想嘛,直接操作浏览器的history,哎,叫做browse history,还有一个呢,叫做哈希history,苏老师这个哈希history来再说一下,其实这个呢叫方法二,同学这个呀,他就根本没有用H5推出的那个history瑞身上的那些API,明白不,他没用H5推出的这个history瑞,说老师那他用啥了呢?其实呢,他用了一个东西叫做哈希值啊,说老师什么是哈希值啊?同学,我说哈希值你不懂,我说一个人你肯定懂,我说锚点你懂不懂,诶锚点你懂不懂,同学你一定是懂的,那你回头啊,你看一下。
20:17
如果你把history这个对象呢,你用create哈西history去创建呢,你看它跟刚才就有点小区别,首先第一个区别,你看这儿是不是多了一个井号啊,其实这也是最重要的一个区别,它多了这个井号,而且你注意看第二个区别,不仅说一上来有这个井号,等你再点的时候看一看,二同学你发没发现这种杠什么什么什么什么东西都是在井号后边的,同学那你说这是不是像极了我们当年学的锚点跳转啊同学,锚点跳转就有一个,诶特殊的行为,锚点跳转啊,我问大家会引起页面的刷新吗?根本不会,但是锚点跳转能不能留下历史记录呢?是可以的,你比如说我为大家写一个测试啊,来一个DEMO啊,点HTML好了,写好一些固定的结构,同学,来几个A标签行吧,你比如说第一个A标签呢,是往DEMO1跳转,那我就写上,哎,叫做。
21:17
跳转到哪了?DEMO一再走几个啊,这是二,这是三行了,三个够用了啊同学,这是二,这是三,同学锚点跳转是不是得这么写?好了右键你打开这个DEMO页面啊,那同学你注意啊,现在我跳DEMO1,你看是不是井DEMO1我跳这诶在跳这儿是吧?同学会留下记录吗?会的,那我问你页面刷新了吗?没有看回退二回退一对吧?哎,所以说同学你就简单记它这个history呢,它有两种的工作模式,一种是直接调用H5推出的history,哎,这个新的API啊,有些旧的浏览器可能不支持,那还有一种呢,就是借助锚点去跳转,说老师那你这也没写锚点呀,你这写的不还是HF同学,那你注意,我虽然没有亲自去写锚点,对吧,我只是说创建了history这个对象,只不过是用这种方式创建的,用这种方式创建的,那等你再去调什么history点儿push啊,什么history.replace。
22:17
这样,那你发现你不用自己亲自去写那个什么锚点那些东西,你只要一点同学,你发现这些东西乖乖的都在井号后边了,对不对?哎,这种方式呢,呃,怎么讲就看起来不太好看明白吧,但是兼容性极佳,兼容性特别好,嗯,那如果说你用这个呢,那就容易出现可能个别的浏览器啊,他就不认识了,对吧?好了,同学给大家讲这个东西呢,只是有一个目的,希望大家呢,能够知道前端路由啊,靠的是谁呢?就是history,而且想跟大家说明白这前端路由也没有你想的那么难,你看工作原理,一个小DEMO是不是就展示出来了,好哎,那这小节呢,我们停一下。
我来说两句