00:00
好嘞,各位在这一小节啊,咱们关注一下路由对浏览器历史记录的一个影响,浏览器里面呢,有两个常用的按钮啊,一个是后退,一个呢是前进,这两个按钮啊,都是依赖于浏览器的历史记录再进行工作的,那为了能把问题说的更明白,接下来我把整个浏览器啊都关掉,重新打开一个,诶,让它干干净净的走,这个时候啊,你会发现我不能后退,我也不能前进,为什么呢?那是因为在浏览器的历史记录当中,对于我当前这个页签的记录啊,只有一条,哪一条呢?就是它后边没记录了,前边也没有记录,当然你就不能后退,不能前进了呗。哎,那接下来呢,同学我点几下啊,然后呢,你记忆一下我都点什么了,我看一下about,哎,我看一下home,我再看一下news同学,我点了几下,我点了三下,你每一次的点击都会留下历史记录,诶你看这我可以后退了,但是在这儿呢,我先不点这个后退,我们先分析一下浏览。
01:00
感气是怎么保存这些历史记录的,首先对它的结构你得认识,它是一个站的结构,站的特点就是一端是封死的,哎,我给你画条线就代表封死了,一上来呢,它有一条记录,我给大家写一下,我就不写的那么完整了,我就写一个local,就代表local house什么什么那么一堆啊,然后点点点8080,然后后边是这么一个东西是吧?好,这是最开始的那条记录,随后我点了什么,你是不是看了那个about,诶,就留下了这么一个痕迹,各位local点点点8080景,然后是about,同学,我问一下你有没有破坏这一条记录,没有,也就是说一直在往里追加东西,所以说我们管这种操作历史记录的模式叫做push模式,哎,就是一直往里边添加,同学数组身上是不是有个方法叫做push,不是往数组的最后添加一个元素吗?那这个呢,也是同理的,不破坏任何一条记录,就是不断的往里边。
02:00
压呀呀呀呀,对吧,有一个官方的词汇叫做压战,本身你是一个站的结构对吧?各位好,那随后我又点击什么了呢?你说不是点击了那个home呀,哎,那就又形成了这么一个记录来接着写local,然后呢点点点8080HOME对吧?各位啊,然后呢,我又点了这个news来接着写local,点点点,然后呢是news,但这得写好各位是home下news对吧?好OK,请问目前我有几条记录四条。啊,然后呢,这个历史记录里面有一个指针,这个指针呢,默认指向最上边的这条记录,也就是说当前你所处的位置,那你看我的路径是吧,8080井吗?然后后面下的news是这条吧,OK,然后当你点击后退的时候,各位它会把这个指针呢往后移动,也就是说你点了一次后退指针就到这儿了,你再点一次,诶,它就到这儿,你再点呢,它就到这儿,也就是说目前如果你在这个位置,你能点几次后退呢?你在这点一次来到这儿已经是一次了吧,再点第二次来到这,再点第三次来到这儿,请问到这儿还能再点了吗?不能了,因为你无路可退了是不?各位哎,所以说你看前进和后退其实就是操作一个指针,哎,来我们试一下啊各位,我点一次后退,嗯,就是news的前一刻后,我再点一次就是about,那如果我再点一次呢,就是这儿了,再点点不了了啊说老师那我前进呢,就把指针再往前调呗,对吧,你再点没。
03:35
起来,OK,这就是历史记录操作的一个模式,叫做push模式啊,而且你每一次点击这种路由链接啊,同学,我就问你这个这个还有这个,还有这些东西,你是不是都拿那个RO link这个标签去写的,诶你拿RO link标签去写,那你每一次点击的时候就都会形成历史记录,并且默认的操作模式呢,是push,哎,就是不破坏任何一条,往里边不断的压入东西,那么对历史记录的操作,各位除了有push这个动作,还有另外一种动作就是re replace来再给大家写一下,Repl最大的特点就是替换掉当前占顶的那一条,什么意思呢?来看一下,比如说目前呀,你所处的位置呢,在这儿还是简写啊,Logo点点点8080,哎,这地址,然后啊,你点了about,那你听我说,各位,当他把东西放入历史记录的时候,不是像你想的那样说不破坏下边的这。
04:35
这个完了,点儿点儿点儿,我来一个什么8080,然后我把这个about给它放进去,不是这样的,它是这么回事,这个about呀,确实要放进来,但是放进来的同时,他把你这一条就干掉了,哎,所以说同学,我目前历史记录里面有几条记录还是只有一条啊,但是变成了谁呢?About,如果你再一点,这条又被干掉了,一个新的就放进来了,如果你再点,那就是这个继续被干掉,然后新的呢放进来,也就是说其实是一种替换的动作,对不对?各位,哎,那这种模式叫什么呢?哎,叫做这个re replace模式替换嘛,啊来各位默认的这个RO link所开启的呢,就是一个push模式啊,其实我们都已经验证完了,各位是吧?来再看一下新开一个啊,不能前进,不能后退,一下两下三下,你点了三下,你就能一下两下三下退回三下对吧,各位啊,那怎么给它开启这个PL模式呢?非常简单,各位回到我的代码里面,你去找那个link标。
05:35
前找到APP route link是不是在这呢?你只需要弱弱的加这么一个属性就可以了,叫做repl啊,完整的写法是这么写的,冒号replace等于哎,写一个数就代表开启replace模式,因为人家默认是push模式嘛,那么简写方式就是不用写的这么麻烦,接写repl就可以了,把这个呢也给它复制,也就是说当我点击about和点击home的时候,都会把当前占顶的这一条给它替换掉是不好,来我们试一下啊同学,我只给about和home加了这个replace来看一下效果啊,打开一新的啊,便于我们说明这问题啊,来控制台开开都无所谓了啊同学咱们就研究一下,目前不能后退,不能前进是正常的,是不好,接下来分析站的结构哈,哎,一端封死的,目前开启的是re replace模式,来吧,走,那在这呢写local点点点8080是这个地址,当我点击about的时候。
06:35
那就意味着这条记录被干掉了,那替换为什么呢?Local house8080,然后在这来一个about是不历史记录里面有几条一条,如果只有一条,那就意味着这指针不能往下走,因为没人了,也不能往上走,因为更没人,对不好了,那你看效果啊,各位,我看about,我看home,你发现我一直都不能后退,这很正常,为什么呢?因为那些记录啊,都被干掉了,只有一条,但是这个news和这个message,各位开启的是不是还是默认的push啊,那所以说走走在这儿是不是就能后退了呀?哎,你说我在这儿后退一下是哪啊,当然是这个news,对吧?各位,那我在news这再后退一次呢?
07:15
嗯,你说到哪儿来看效果,走就回到这儿了呗,那我在这儿再后退呢,后退不了了是不?各位已经就到根了吗?说老师那8080只有一个井号,你回不去了,那条记录被替换了,哎,各位,这就是路由对历史记录的一个影响,默认是push的动作,如果你想替换,请开启replace模式。诶,回到我们的总结里面,读一下各位link的replace属性,控制路由跳转时操作浏览器历史记录的模式啊,浏览器历史记录写入有两种方式,一个是push,一个是re replace push是追加,而re replace是替换掉当前的记录啊,啥叫当前的?来各位回到这儿再给你演示一下,这俩人呢?不开启PL,那也就意味着他俩是push。那回到这,各位我把哪块呢?我把这个home里边的哪个news和message啊,我给你开启replace模式来写着replace复制走啊,那这回就有意思了啊,打开一个新的,咱们再分析一波啊,同学一上来这个历史。
08:15
注,里面只有一条,就是当前这一条,对不对啊,来分析啊各位,接下来我点四下啊,我分别点about home,然后再点这个news和message啊,我开始点走走走走,我们自己心知肚明啊,这个开启了repl,这个呢,开启的是push,来咱分析一波啊,各位走着一上来吧,是这个啊,我就简单写了,各位一上来就是8080在这儿,然后呢,你是不是点了一下那个about,由于about开启的是push模式,所以8080在这应该是这么一个动作,不会影响这一条了,那然后呢,你又点了哪个呢?那个home 8080走什么呢?Home,注意了,接下来你点的是不是那个news news的动作是PL,所以说同学这一条被干掉了,取而代之的是8080这个东西,然后是home下的news,对吧?随后呢,你又点了message,那这一条就又被干掉了,取而代之的是这个了,来8080走这个。
09:15
Home下的message对吧?那也就是说目前指针是不是在这儿呢?那如果我后退的话,各位你说按照图的分析,我应该直接来到哪了呢?是不是来到了这个about呀,哎,来看一下啊,321走,你是不是about,你可以再后退一下,但是这儿呢就退不了了,是这意思不OK,所以说一定强调一个东西啊,是替换掉当前的记录,OK,就是目前占顶的是谁,我就把谁干掉,如果说你后边还有东西,那我不影响啊,默认的为push模式,如何开启PL呢?很简单,RO link里面写一个PL是不是就可以了?哎,好了,那这一小节呢,我们听。
我来说两句