00:00
好嘞,各位,在这一小节啊,我们给大家讲一个全新的路由跳转方式,叫做编程式路由导航,你先不用琢磨,我说这概念啊,一会儿呢,我把代码写完了,大家呢,自然而然也就懂了,接下来呢,分析一下我们目前所完成的功能,我再编写这个导航区,还有这个导航区以及这个导航区的时候,我一直啊都离不开一个人,谁呢,就是他link对吧?各位,我失去了这个标签,我就没有办法写里边那个兔属性了,那从而就不能实现路由的跳转了,是不,各位。那在这小节呢,咱们就研究研究,我就不想写这个RO link,那能不能实现路由的跳转呢?也能啊,那这个时候啊,就有同学说了,老师你总有这些奇葩的需求,人家不说了吗?想实现路由的跳转就写一个RO link就可以了,你为什么非得不写它也实现跳转呢?同学,那是因为有的时候啊,我没法写它,就比如说我们都知道各位这个RO link最终啊是不是转成了这个A标签啊,那你说如果我这里边儿这些导航项啊,万一有一个是拿按钮写的怎么办?我现在肯定非常给力,这三个导航区里边的东西我都是拿A标签写的,那万一我拿button写的怎么办?说老师那就还用它呗,你还用它元素,最终就是A,不是人家写的那个button,你把整个布局都破坏了,是不?还有这么一个场景,各位,就是有些时候我需要它等一段时间自动跳转,啥意思呢?就是整个页面一加载完。
01:35
嗯,我等三秒钟随后啊,自动跳到news这个里面,那你说怎么办?哎,说老师我还拿它写呗,各位,你拿这玩意儿写完之后得有人点,没有人点它是不会实现跳转的,对不?各位,除非你这样做,三秒钟之后,你引导着用户去点了某个按钮,完了实现跳转了,诶,到了这个news,但是现在我不想让用户点呀,我想他直接就能跳是不?那你写一个RO link,我看看实现不了是吧?各位,哎,来,回到课件里啊,我们做这么一个功能,各位看好了,当你点击message的时候,每一个消息的后面啊,都出现两个按钮,分别是push查看,还有PL查看,无论你点击哪一个按钮,都会在这个区域呈现消息的详情,那么push和repl就是对应对历史记录的两种操作模式,你点击push查看啊,然后你看了123就能留下每一个人的记录,但如果你点的是PL呢。
02:35
就只能留下最后一个人的那个记录,因为replace是替换对吧,各位,还有就是这儿,诶你看这儿有一个后退,还有一个前进,其实这两个按钮呢,就是相当于你浏览器里边的这个后退,还有这个前进啊,我们看一下整体的效果啊,来给你播放一下,走,点击messages看看一,看看二看看三,我都是push查看,能留下每一个人的痕迹,来后退二,再后退一,就这么一个效果,来吧,写写各位,这就是我们所说的编程式路由导航,说的再直白点,就是不借助RO link的路由导航,叫编程式路由导航,来吧,谢谢各位,首先呢,把这儿实现了啊,就是每一个消息的后面啊,有两个按钮,Push查看,PL查看,来回到这里呢,写一下找到哪个组件呢?得是messageage啊,在每一个人的后边写,那得是哪呢?分析一下各位啊,整个这个呢,是一个Li Li里边啊,已经有一个A元素了啊,我还得写一个button,再写一个button,也就是说是Li里边的事,所以。
03:35
说应该在这写对吧?各位来写一按钮,Button叫做push,然后呢,查看,再来一个不是push了,PL查看对吧?先把这结构写好啊,这个绑定事件呢,我们先不绑定,回到这儿来看一眼,OK了,是这意思来接下来呢,再写,无论是他还是他都得绑定一个点击事件,那这样吧,同学,我们先考虑一个啊,慢慢来,先写它回调的名字给一个呗,我就叫做push兽,对吗?毕竟是push查看嘛,哎,Push show在这儿呢,折叠起来配置一个methods OK push show里边写什么?琢磨一下吧,里边你所写的这个绿色框里的代码完成的功能啊,得和这一堆代码是等价的,对不?同学这一堆代码能完成什么?能完成展示详情组件,并且能携带参数进去是不?各位哎,你只要把绿色框里这些,哎,通过一些奇奇怪怪的代码在这实现了就可以了,那这个时候你就不得。
04:35
不请出一个人了,谁呢?各位来,我给你做一个输出,就是所有组件身上都能看到的那个人,整个应用只有一个的那个人,谁呢?就是Dollar福RO同学,不要找路由,路由只是一个规则,同学,比如说我找RORO只是一个规则,别人去应用这个规则,那么RO是路由器,路由器就很强大了,它有绝对的指挥权。
05:00
路由器说来,你给我往那儿跳就真的能跳啊,你不用去点那个RO link路由器,只要一发话来给我跳过去,你就能跳过去,OK啊,我给你输出一下这个路由器呢,让你看一下啊,回到这同学刷新一波啊,然后点击push查看路由器是不是输出了,发现路由器其实是谁的实力,是view roor哎,这个构造函数的实例对象,哎来打开它身上呢,有很多的属性和方法,但是我跟大家讲最有用的那些其实没直接放在自身,那放在哪了呢?哎,放在它的缔造者哎,就是view roor的原型对象上了,来我们看一眼啊,打开你发现有这么多的东西是不?哎说说我们接下来用的是哪个,我们用的是这个push,哎,就能完成路由的跳转,并且是对历史记录的push操作,那同理,Replace呢,哎,就是替换操作呗,我们先用这两个push replace好了,回到这我们写写各位,那这块呢,给它删掉,或者先给它注掉了啊删了吧,一会再写。
06:01
啊,this.dollar for route点直接写push就可以了,那问题是我往哪跳转呢?我带什么参数啊,我怎么配置啊,你当然得写一个配置对象,还说老师,那接下来呢,里边呢,同学跟这个一模一样,哎,你看人这API设计的,你原来怎么写还怎么写,你原来to,我问你写的是不是一个对象是那你对象里面所有的这些KY6原来怎么写,复制还怎么写,粘过来就OK了,但是啊,你别急,你这儿没有M对吧?人家这为什么能用M呀,你看看呗,各位,你整个绿色框里的这些东西都可以随意的使用这个M,为什么呢?因为都是v for里的结构,对,不但是在下边你那没有M,那怎么办呀?哎,把这东西给它传过去不就得了吗?啊,那在这儿呢,接收一下不就得了吗?应该在这儿是吧,OK,来看一下效果吧,啊回到这边啊,我这样各位啊,把它关掉,我重新打开一个让它干。
07:01
静静的啊,来打开找到home,哎,找到这块,来先看看能不能展示啊来走走走是不是没问题啊,控制台呢,也打开刷新一下啊来走着控制台打开,防止出现什么错误啊,是不是都能看呀?啊那每一个人看完了之后,是不是都留下这个历史记录啊,所以说各位我点后退的时候走二再走几一是吧,各位,OK push查看,这不就实现了吗?哎,同学你想想,你说如果你手里面握住了这个东西,那是不是可以说想什么时候跳就什么时候跳,想往哪跳就往哪跳,想带什么参数是不是就带什么参数啊啊写个定时器把这一堆包裹里面是不就能实现?哎,等一会自动跳转了是吧?哎,OK,那这是push show,我们再写一个,哪个呢,就是它呗,Click名字呢,给一个啊,不叫push show了,用这词吧,叫PL show。复制过来放在这,同样的也得传这M啊,你得匹配一个方法给它,直接呢写在这应该是这里面啊逗号走里边怎么写呀?哎呀,都是同样的,只是换了一个API,不叫push的是不是re replace OK,这不就可以了吗?来咱试试啊各位为了把问题说明白,还是单独开一个,让它干干净净的,目前不能后退,也不能前进是吧?刷新一波来控制台打开啊,点击一下home,点击一下news,点击一下message,先看看能不能看啊走诶说老师有问题,M没有定义啊,为啥呀,没接收啊是吧?哎,那传是传了没接收好了保存再新开一个走啊,别嫌麻烦,把问题呢说明白诶点一下打开了吧,控制台开好,刷新一波,嗯,点击home,点击message,来我看一看啊走走走能不能看能,但是我们心里明白,PL是一个替换的动作,也就是说看三的时候,二被替换了。
08:51
看二的时候呢,一被替换了是不?各位哎,那你说我现在回退,它能回退到哪儿呢?来我点一下啊,你看效果走,哎哟,我天呀。
09:01
什么情况,怎么回到这儿了呢?来同学,我再给你完整的演示一遍我的操作流程啊,看好了,整体都关掉。打开,然后呢,刷新一波控制台,给你打好我先点的home。然后点的news,然后点的message,哎,就别管我之前怎么点的了,反正现在我是这么点的啊,点了home,点了news,点了message,随后PL看一,PL看二,PL看三,现在我回退,注意走,是不是一下子回退到这儿了,老师这什么情况啊,分析呗,慢慢来,各位你还记不记得了这两个东西,其实我用的嗯,也是PL模式。对吧,哎,我一说这个可能反应快的同学一下子就知道怎么回事了,来同学咱们分析一波啊,给它清掉,重新打开走打开分析一下啊,刚才呀,我是先点的home是不是,嗯,来我就直接在这儿了,画图了,这是浏览器的历史记录,站一上来呢,有这么一个直接写local点点8080不行,我这字呢,太大了,我得小一点啊来调整一下。
10:11
点点8080目前呢,是这么一个状况,随后我点谁了啊,我点了home同学,我的home是不是push模式,也就是说不破坏这条记录,点点8080谁呢home,随后我点谁了?是不是news,那么news的动作各位是不是替换,也就是说会把这个东西诶替换掉了,那变成了什么呢?变成这个了,8080,然后是news准确点写啊后下的news OK,不,随后你点击了谁message,可惜了这message啊,嘿,也是一个替换的动作,来接着写local点点八零八零下的home下的对吧,OK。
11:01
然后你点谁了呀,然后你就看到消息了,然后你就点了PL查看是不?各位,于是乎这个东西又被干掉了,取而代之的是那个消息几,消息一其实写的完整一点,应该是这么回事来,同学别怕麻烦了,都写到这种程度了是吧?点点8080,然后井号走,后面下的message下的谁呢?001,哎,完了写的是什么消息一对吧?各位啊,那我问你消息一把它替换了,但等你点击消息二的时候,是不是还是replace呀?所以说消息二把它替换掉了,变成了002,那同理,三又把二替掉了,三跑到这儿了,所以说各位,这些东西都被你弄没了,那你指针在这儿,一旦你点了后退,各位是不是就跑在这儿了,对吧?各位,但是如果说中间在这儿,你要混入的,你点了一下那个about呢。同学,我目前是这个状态吧,我点了一下about,然后我再点home,有没有种感觉就把about保护起来了是不?About先,哎,给这塞进去了,随后塞的是谁?Home随后呢,Home被替换,News被替换,Message被替换是不?各位这回不就说明白了吗?啊来再演示一下啊,Home点了,然后注意了,点news的时候其实后已经不存在了,点message的时候news已经不存在了,点一的时候message不存在了,点二的时候一不在了,三的时候二不在了,所以说这个时候你后退同学直接就来到了最开始的样子是不,但如果说你这么点呢,来给它关掉,我再打开一个,嗯,怎么点呢,看着啊,点击about,点击home,各位about是不是留在那儿了?哎,所以说点点走走走,这时候回退同学你自己可以再画一个图,在这我就不画了啊,浪费时间,所以说一后退回到哪儿about呗。
12:44
但为了不让大家觉得恶心,我调整一下啊各位,我让这个news和这个messages也不是PL这个动作,那回来我调一下找到哪呢?Home组件,把这个PL删掉,哎,把这个呢也删掉,这回呢便于大家理解,要不刚才啊你还得分析啊,很浪费时间啊,来走,再打开一下啊,看看about,看看home,看看这些同学是不是都能留下痕迹啊,然后你注意观察了,点一的时候,Message被干掉了,点二一被干掉了,点三二被干掉了,所以说这个时候我回退应该回退到news对吧?各位OK啊,那来咱接着往下说啊,这两个查看呀,你写完了,但是同学你看一下课件这块儿还有后退和前进的,并且这两个东西各位是出现在哪的,是出现在顶部的,是不来吧各位,那回到我的代码里,找到哪个组件呢?找到banner,哎,然后在这儿呢,各位写一下那两个按钮啊,跟这个H2啊是平级的,嗯,在这写button,哎,一个叫做。
13:45
后退一个叫做前进,那我怎么才能实现后退和前进呢?啊,先写上这个点击事件走,后退呢,我们就叫做back啊,那前进的往前走有这么一个单词叫做forward,哎,往前的把这俩呢给它写一下,在这写一个啊MYS是吧,嗯,走,然后呢调一下缩进。
14:07
OK,写个逗号,那调哪个API呢?同学,你还得找这个人z.Dollar RO,听从路由器的啊,路由器让你回退,你就不得不回退是吧?那调哪个API呢?来吧各位,还是啊,先给大家输出一下这个路由器consolo走着,嗯,回到这里面刷新一波,开到控制台,我点击后退啊走路由器是不是出现了,同样使用这个圆形身上的这个方法,各位bike就是回退,那么forward就是往前对吧,就是前进,哎,所以这会儿就简单了,你把这个back给它复制一份,回到这儿开始写吧各位,删掉这怎么写this.dollar符,点back就是回推,然后呢,把这东西一复制,换个单词,哎,Forward就是前进,这不就写完了吗?哎,瞧一下效果啊各位,这样吧,先打开一个干干净净的啊,然后呢,看看about,看看home news message,是不是都能留下痕迹啊,来,后退后退。
15:08
后退前进前进前进,是否同学你完全可以借助路由器去操作整个历史记录,那在这里呢,还有一个API应该跟大家介绍一下啊,那在这呢,我先把它掉,我再给你输出一下这个z.Dollar身上还有一个挺有意思的啊,来回来看一眼啊,控台打开刷新啊,点击一下后退路由器输出了吧同学,有这么一个东西叫做go。他没说后退,也没说前进,就叫做go,那这go有什么作用呢?啊,在这儿呢,写一个按钮啊,叫做测试一下go啊,那在这呢,就叫做test,诶好给它复制,再写一个method test里边呢,直接调那个啊this.roer点叫做go,直接跟大家说啊,这个go呢,要传入一个数字,如果是正数,比如说我传了一个正三,那就是往前走三步,就是相当于连点三下前进,那如果我写的是负四呢,那就是连续后退四步,对吧?各位来,在这儿呢,我给你写一个负二,啥意思呢?就是后退两步,那看一下效果啊,打开现在肯定是不能前进,也不能后退,对不对啊,看about,看home can news can message同学,我想连退两步,你说我退到哪儿了?我退一步到这个news,你说我再退一步呢,是不是home?哎,你看一下啊走哎,就是正常展示home,那如果说我写的是正。
16:35
三呢,那就是往前连续走三步好看一下效果啊,各位再打开干干净净的走,那看一下about,看一下home news message,然后你注意了各位,我后退一步两步三步,说老师怎么没效果呢?嘿,因为我注掉了是不?那回来吧,借助浏览器的这个一步两步三步,接下来我测试一下go走,你看连续的往前走了几步,诶,三步,这就是go方法,OK好了,同学你学会了这么多的API,可以控制前进后退,也可以控制什么呀,就是灵活的往哪个路由那跳转,并且可以携带参数,OK,这就是我们所说的编程式路由导航,就是脱离了RO link对不?各位来看一下给大家的总结,编程式路由导航作用就是不借助RO link实现路由的跳转,让路由的跳转更加灵活是不?哎,两个API啊,最有用的一个是push,一个是re replace,当然我们也学到了。
17:35
和一些别的各位来把这两个呢给它补上,找到我的班ner里面,一个是这个东西,哎,叫做前进,还有一个东西就是它,哎这个啊,先写这个,这是后退,那把它解开吧,让它完成后退那功能啊来把这个呢给它复制放到这儿,这是后退,还有一个呢,就是可前进也可后退,我看你传的那个东西是正数还是负数,对吧?来注释给大家写上啊,这个呢叫做前进,哎这个呢写上叫做后退,那这个呢,写上叫做可前进也可后退,OK,那这一小节呢,我们停。
我来说两句