00:00
在上节课给大家讲了push和REPLACE2种路由跳转的方式,那这节课我们再来继续看一个新的东西啊。先复制一下代码,把这些都关掉。这个删掉。然后复制一下代码。12。He片。好,先不用管这个名字啊,等会我给大家引出来这节课我们要讲的一个内容。把这个结束掉。然后进入到这个目录里面来安装相应的一个依赖,因为我把这个依赖删了是吧?啊,那我们安装依赖,根据这个里面的这个啊,所需要的内容去安装依赖,哎,CD上一级目录12,它不减不全,然后使用这个压安装。先让他安装了啊,我们来看一个问题。现在我们写的这些路由链接,哎,要么是我们自己封装的这个买link,要么就是我们直接使用的这个link啊,那假如现在有一个需求,就是我一个图片,你如何给我加上这个路由链接呢?
01:07
嗯,啊,当然你可能会想到啊,我在这个图片外面包裹一层这个link,诶,当然这种方法也可以,那现在我来说一个新的一个需求好。假如现在我是在这个news,诶这个里面,那现在我想要在这个三秒之后啊,让它自动去跳转到这个mec,这时候你怎么能实现。这时候我们你不管通过这个啊link啊,通过这些啊na link啊,这些标签都是实现不了的,对吧,那既然涉及到这个定时器,肯定就得用到这个我们的GS中的定时器,那么我们的这个跳转就要写到这个GS里面。是不是这样的,好,那既然要写到这个GS里面,我们就得用这个GS的代码来实现这个啊路由的一个跳转,那这种使用GS来实现这种路由导航的跳转,我们一般称为编程式路由导航。
02:00
接下来说一下我们要写一个什么例子啊,我们在这个message里面,它是有这个消息一消息二有这几个啊link啊路由链接对吧,那我们在这几个路由链接后面呢,再加两个按钮,当我们点击这个按钮的时候呢啊。不是直接使用的这个link这个标签进行路由的一个跳转来显示的下面的内容,我们使用什么呢?使用这个GS来实现,哎,这个路由的一个跳转啊,为什么呃说要准备两个按钮呢?因为我们的这个路由跳转它有两种方式,一个是push,一个是replace,对吧?啊所以我们在它后面准备两个按钮呢,也是一个是用来呃使用这个push进行这种编程式的一个呃路由导航,然后还有一个就是使用这个replace。那我们先把这个代码给写一下啊。找到这个代码。好,这里啊,已经安装了,那我们先把它给运行起来。
03:00
啊,不用管它了啊。来找到。这个。路由组件啊,在这个message里面。我们先先改一改啊,先改一改什么呢?啊,为了让大家更直观的看到这个效果呢,我们不使用这个states传参,因为S传参大家地址里面看不到对吧。我们先把这个注释掉啊,使用第一种方式传菜。来使用这个pas传参,那你这里改了之后啊,我们编写。呃,这个路由链接的地方传参的方式改了,那声明接收的地方也要改,是不是好这里要改。嗯,那声明路由的地方改了之后,在我们接收到这个参数这个地方也要改,对吧,那就不能使用这种要使用。的一种方式啊,这个你们要注意,你改的时候要都把它改回来好吧。好,接下来还要做一个什么事情。呃,把这个replace我先给删掉啊,就是之前上节课讲这个push replace的时候的代码也给删掉。
04:06
然后看看其他地方还有好像还有。在这个index里面。啊,这个也给删掉线。APPGS。好,我把这些replace都给删掉了啊。接下来就是把这第一个给打开了啊,我们来先看一看效果能不能正常运行啊。把这个。重新给开一个啊,因为那个已经有历史记录了,好点这个点这个诶点一下诶参数使用apartments串串都是对的啊,0203诶然后我后退零二后退。A01,好,现在都是好使的啊,回到了这个默认状态,接着我们去写这两个按钮。
05:00
写到谁后面呢?写到这个链接后面啊,那这个链接是在哪,是在这个啊message,哎,就是这块写到它后面,我来写一个两个按钮啊。Push跳转。给一个class。BTN。行,先看看效果啊。来给个背景颜色BGN。Gun。好,这样的一个按钮,我们让它,呃,在距离左边再留一点间距啊。好,已经有了些间距啊。
06:01
那我写的这些class呢,都是BOP的这个这个样式啊。接着我们再来一个跳转。来按钮我们经准备好了,那我们的需求刚才给大家说过了,诶当我点这个铺起跳转的时候啊,我实现啊就是铺起跳转,那铺跳转呢,我就可以啊去前进和后退对不对,就像这种,哎,我前进是二,然后后退是一,那我如果使用这个replace跳转,那它就是对当前所在的这个啊历史记录啊进行了一个覆盖,那之后我要后退的话呢,就是会回退到这个上一级。啊,上一节回到这里。这么一个情况啊。啊。接下来我们来想一想啊,现在只是两个普通的按钮,它肯定跳转不了,对不对。对吧,那刚才说了,我们想要用这种方式跳转,必须得借助于这个GS,因为这是按钮,所以是不是得给他绑定一个点击事件。来,找到这里写按钮的地方。
07:03
我们来给他绑定这个啊,点击事件。Click this,第二,Push show。下面也给一个啊,点击时间啊,我们先写一个啊。当我们点击。这个按钮的时候啊调用。这个剖Q方法,那在这里我们来写。这个方法。在这。等于A这一个箭头函数。我们先把这个注释写上。当我们点击这个按钮,触发了这个方法之后,这个方法里面要干什么,是不是要进行跳转啊,进行诶push形式的一个跳转。对吧,好,关键的代码就在这里,我们怎么样进行复习的一个跳转。我们是不是得借助一个东西来借助什么呢?哎,看一下我们之前写的这个笔记再给大家,哎,说这个。
08:04
啊,路由组件。我们接收到的是不是有三个固定的属性对吧?那这两个之前我们都用过了,接着我们来看看第一个属性history。因为我们这个组件,它也是一个路由组件,对吧,所以说它也会接收到这三个固定的属性。诶,那我们刚才说了这里,你要想进行这个跳转,我们必须得借助一个工具,那借助谁呢?就是借助于路由组件,它收到的这个固定属性,哎,它其中的这个黑色主属性可以看到啊。这里面有什么?有push,有replace,是不是?哎,这正是我们要用的一个方法来。接下来我们来看一下啊,This点。History。里面的谁铺写方法啊,那剖析方法里面是不是就是我们要进行铺写跳转的一个路径,我们跳转到哪里?跳转是不是这个路径对不对。来把这个给粘贴上啊,是不是跳转到这个路径好。
09:03
但是啊,因为我们这里使用的是这个啊apartment的形式,我们是不是还要把这个参数给带上,我们需要两个参数,一个ID,一个啊这个title对吧。啊,那这里怎么去带这个ID呢?有两种方式啊,你要么你把这个函数,你给它写成这种高级函数,要么我们就在这里进行一个处理,给它包裹一个函数,哎,包裹什么呢。包括一个函数啊。好。哎,直接在这里面去执行。这里面我们把这个ID和title给传过来啊。ID title。啊,我这是一个简写的形式啊,因为。呃,这个时候它其实完整的写法是这样的,我是一个箭头函数对不对,那这个整个这个箭头函数是作为这个回调给到这个昂可,当我点这个啊,点击这个按钮,触发这个安可的事件,它才会触发这里面这个代码,然后执行这个函数,把参数传过来。
10:04
清楚了吧啊。我们就是说你在写的时候,你不能直接去写这个,把这个函数哎,作为它的这个回调,因为你这么一写的话,它立马就执行了。是不是好一定要包裹一个函数啊,这个时候ID和title传过去了那。这里面。是不是我就能接收到这个ID和这个title,对吧,那接收到之后这里面是不是就可以。去把这个ID和title给放这里,我把这里改成啊模板字符串,这样的话,我去写这个变量比较方便直接可以这样去写,要不然我还得用加号连接字符串是不是。那ID接着再斜转dota。好,抬头。这个是我们进行这个剖析跳转,并且把这个参数也传了过来,好来看一下啊。来重新点开一个。这个关了啊。来点击一下啊about message,那我不点这个了啊,点我们写的这个GS中进行了一个跳转,接下来注意啊点击诶是不是跳到这个这个一哎,这个消息也带着呢,对吧,这个参数他们参数在呢,接着点第二个。
11:11
是不是变成了二,下面也变成了二三,是不是都是好使的,那我接着后退,因为我们使用的是铺这种方式啊,所以后退的时候它回到二,那在后退的时候回到这个一。是这样的吧,好,后退,再回到了这个message也可以前进,接下来我们把这个replace也写一下啊。找一下。哎,同样是给一个。这个事件啊,点击事件。那这里把名字改一改。Replace。上面,哎,找到这个方法。把这个改了啊。
12:01
这一块也是进行replace跳转,那这个时候就不能使用这个方法了,对吧,看我们的笔记,我们是不是还可以使用这个replace方法。来保存,重新打开一个看一看啊。这个关了啊。点击来点击这个message。好,接下来我使用这个replace跳转。显示了零一啊REPLACE02 replace03,因为我们这个replace它是一个替换的一个操作,所以当我点后退的时候,是不是直接回退到了这个news对吧,它是把那个message给替换了。注意下看一下啊,当前我数的是不是这个message,那我点了一个replace,它打开的这个啊,跳转的这个路由链接,它会把这个当前的这个给替换掉,所以我在后退的时候就回到了这个new。接着我们再来看一看啊,那现在我们使用的什么方式呢?使用的是这种apartment传参,我们是不是还有这个色系。的形式去传这个参数,哎,我们来。
13:00
看一下啊。首先得改一下这个代码。先改下面。使用色体传递这个参数的话。那我们这里就不用了啊,这个是P参数,那这个按钮呢,我们不能写在这,因为我们要把它放到这个文字的后面是吧,把这个按钮给剪切一下,放到放到最后。接着来看一看这个色计方式的一个穿插,把它给打开,这个是不是之前我们写的这种色计形式,它以这种哎问号ID等于什么的形形式。哎,去传这个参数对吧,好,那这里。嗯,改了。这个对应的接触,哎,这个声明路由是不是也要再改。好,那这个事件我们就不改了,因为这个只要触发了一个事件,可以等会我们去改这个事件里面的这个方法就可以了。接着啊,在这个里面。对应的这个search是不是也得改一下啊,那把这个QS打开,因为它用的这个QS去转换接收到这个参数,这里改完之后呢,去改一下,哎,我们的这个函数。
14:02
这个是进行剖析跳转,哎,我们把它给说明给所长,这个是。他啊,全餐。来下面这个也给它加上啊,那我们把它给注释掉。复制一个啊。复制一个什么呢?这里我们想写的是一个什么例子,是不是?色传参色传参那就不是这种斜杠斜杠的形式了,而是什么?是这种哎,问号形式,ID等于它,然后and符去连接and for title等于这个值,是这样的一个形式,对吧?好,接着呃,把它也给改一改,那把这个谱写改成replace。这个也改一下。啊,是不是。改错了啊。哎,这个啊。先不管它,那我直接复制一下这个,只要把它改成这个replace就可以了啊。
15:06
啊,这里也改一下。好,接下来我们来再来看一看这个。啊,色体全餐。接着重新打开一个啊。来点击点击。哎,这两个都可以点啊,你看这里是以这种问号的形式,对吧,你看零一,然后零三,哎,只不过我们使用的replace,那后退的话就会,嗯,回退到这个news,因为这个message当前所在的这个已经被。就给覆盖了是吧。啊,这两种方式,当然你使用普也是可以的啊,啊普系零二。好,这个四题我们说完了,接着来看一看。我们第三种穿参的一个方式,是不是还有一个state对吧?哎,这种这两种方式比较好理解,因为它的这个参数都是附到这个跳转到这个路径里面啊,跳转这个链接里面,那这个space它的这个参数并没有体现到链接里面,这时候我们怎么办呢?啊,我先把代码改一下。
16:02
同样的把它给注释掉啊,那我们的这个消息把这个给打开。哎,这个我们就使用到这个的方式,那这个声明路由的地方来。也给打开啊,虽然它俩一样,但是我们为了就是让他们成对啊,把这个也给改成这个吧,接着接收参数的地方,那你肯定不能用它了是吧?啊把这个不用了也注释掉,那要。啊,使用这个state传递参数,我们要这么去接收啊。这么去说,接着去改一改我们这个方法啊。这里面那就不能。使用这种方式的对不对啊,使用什么方式呢。看一下我们的笔记啊。好。看一下这个笔记,注意啊,因为我们的space它要传递这个参数对不对,因为你看看这个链接来。我们在这个写链接的时候,这里定义了一个我们跳转的路径,后面是我们要携带的这个参数,对吧?那么我们如果用这种编程式路由导航,也就是用这个GS的话,怎么去传递这个state呢?啊state呢,你可以看看这个笔记啊,它有第二个参数是state对吧?说明我们可以去传第二个参数,把这个state传过去啊,第一个是pass,好,接下来我们来写一下啊,那呃,之前的这些代码已经改过了,对不对啊,我们只要去改这个GS就可以了。
17:17
接着去复制一下。来stay存参啊,当然还是使用的这个push写,只不过呢。它有两个参数啊,第一个参数就是我们要跳转的这个路径对不对,第二个参数是我们要传的这个看一看。是这样的吧,啊,那直接就给一个对象就可以了。对象里面我们传这个ID,哎,再传一个这个title。是不是这样的啊,因为它这个键和值名字都一样,哎,所以我们可以直接简写啊就是。ID逗号抬头就可以了,对吧,好,那同样的下面这个也给来一下。
18:04
C的传参,然后这个我们是使用的这个replace模式啊。把这个改一改啊,那这个跳转的方式,后面这个传的这个参数的方式都是一样的啊,来保存重新打开一个看一下。点击点击注意下面我进行来跳转,跳转的这个消息点击。哎,这里面并没有带参数对吧?啊,但是这里面能收到这个消息,消息二也能收到啊,这个就是我们,呃,通过这种啊GS的这种形式来实现的space的一个。路由的一个跳转,嗯,它是接受可以接受第入参数的啊,因为我们的这个K和Y9是一样,所以我们这里写了一个简写,那这就是。这三种啊传达方式,嗯,这也是我们这节课说的啊,编程是路由导航,那你听名字可能怪怪的,那实际上就是说我们不借助于它提供的这个link呀,啊na link标签,而我们在GS中使用history提供的一些API来实现我们的呃,链接的一个跳转啊路由的一个跳转,这种方式其实我们就称为诶编程式的一个跳转。
19:03
啊,为啥叫编程编程式的跳转呢?因为这个跳转的这个行为啊,它的这个时机是可以由我们的代码来进行一个控制的,对吧,那这个原来的只能去手点是不是这样的啊好,那既然说到我们实现这个编程式的这个路由导航借助的是history这个身上它的一些API对不对,而且看我们的笔记,我们只是用了这两个,那是不是还有几个我们来一起来看一看啊,那这两个其实你看名字也知道啊,Go back是。回退是吧,那go for的前进对不对?嗯,有点类似于什么,就是我们浏览器中的这两个按钮,一个后退,你看一个前进是不是这样的啊,01021个前进,好,那我们把这个写一写啊,我们把这两个按钮放到哪里呢?我们先放到这个message这个,哎,路由组件的这个链接的这个下面吧,啊,看一看啊,啊或者说。呃,放到他的这个这个最下面。可以吧,因为它也是,呃,在这个message这个组件里面。
20:03
看看在这里。在这里去匹配的是不是啊,所以我们要把它放到下面的话。看一看,应该是在这个div。啊,那就是在这里啊,放到这儿我们来放两个按钮啊,先写个div。写两个按钮,一个是前进。啊,先写后退啊后退把这个样式给上。内蒙。一天。给个小点的按钮啊。再来复制一个前进。好,先看看效果啊。已经有了这两个按钮啊,有点近,是不是让这个离它远一点,M2杠三。
21:05
好,接下来给他去,呃,写这个点击事件on click,使用this点。Go back吧,我们也用这个。这个你就不用再包括函数再执行了啊,因为我们又不用传什么参数对不对啊。同样的,那下面这个也给一个点击时间来勾。For。来写一下这两个。函数啊,把这个折叠一下。在这里写。Go back。使用谁是不是this.purpose.history里面的这个go back这个方法啊来进行后退,那同样的。还有一个前进的方法对吧,是go forward。
22:01
也是使用这个API,来,我们先打开一个吧。找到这里啊,先打开一个。点击来点击那我就使用。这个push的方式调整嘛,这样比较明显一二。三。接下来我点击后退,可以看到他回答的二,哎,点击前进到三后退二一好,那这个前进后退就写完了是吧。接着再来看一个呃,这个勾勾是它是什么回事呢?你可以看到它接收一个N,接收一个number,也就这个勾的话,我们可以传递一个呃数字。啊,那我们如果传的整形,比如说够一,它就是前进一个啊前进一步,那如果是啊勾二就是前进两步,那如果我们传了一个负值,比如说啊够负一当然就是后退一步,那如果是负二就是后退两步,我们把这个也写一下啊,同样的啊,也是写到这个里面吧。来写到这个,最后在这个里面,哎,我们再来写一个,也写个够啊。
23:07
这里。也直接用go吧。在上面来写一下这个方法。那现在嗯,我写一个二,也就是说我要。我要前进两步啊。重新打开一个来。点击点击。消息一消息二消息三,好,接下来我后退到零二,后退到零一,那我如果够前进两步的话,是不是直接跳过了二到三来点击。没有反应啊,应该是报错了,我们代码有问题,看一下啊。来看一下代码吧,这里有没有报错?看看啊。这里这个go,我们是点击这个是找这个go方法对不对,但是这个上面好像这里写错了是吧,这里忘了改了。
24:03
嗯,名字忘了改了,接下来再来打开一个那个关掉啊,再来看一看。点击来。消息一消息二消息三,然后我后退一下,后退两下,后退到消息一,接着点这个勾,它应该会前进两下,回到消息三,是不是这样的,对不对?好,那再给大家演示一下。这个负值的一个情况,比如说负二。来点开。点击来。小写一,小写二,小写三,这个时候我的购现在是负二,你就说会后退两步,那现在是零三,你后退两步是不是直接到这个零一去了,是不是回到零一了啊。啊,那这个就是啊,我们所说的这个啊,编程式路由导航,其实就是对这个路由组件它提供的。这个history。啊,这个属性。对他身上的一些API的一些使用啊。那这一小节先到这里。
我来说两句