00:00
好的,各位刚刚说的呢,是push与replace模式,那所以说把src呢,CTRLCCTRLV,然后我们改个名啊,叫19SRC啊push与repl模式来,那我做一个还原代码的操作啊同学刚刚啊,我是把所有的路由跳转是不都改成了re replace模式,那不太合适,我改回来啊,这个呢,删掉,因为我得留下点痕迹嘛啊,然后再找到pages,找到home,删掉删掉,再找这个message,把这个也删掉,好那如果我要这样改的话,各位注意了,打开回到浏览器里面,我每点一次是不是都能留下历史记录啊,你看回退回退回退回退走是不是可以的?好嘞,来,那接下来我们讲一个东西啊同学,叫做编程式路由导航,什么意思呢?先不用去琢磨啊。
01:00
什么是编程式?我讲完了,一下子大家就懂了啊,问大家几个问题,同学,页面里边about home点击的时候是不是可以切换路由?News和message点击的时候是不是也可以切换路由?那么点击这些消息的时候是不是也可以切换路由啊?好,那同学,我想问你的是这个导航区。这个导航区,还有这个导航区。都是怎么实现路由切换的呀?你觉不觉得他们三个都靠了link和NAV link,没有了link或者是navy link这三块导航区根本就不能实现跳转是吧?可能有些同学说老师那不很正常吗?你想实现路由的跳转,那你为什么不写路由链接呢?好同学,那你说如果有这么一个需求怎么办?页面上呢,有一个图片,点击图片想跳转路由怎么办?图片你不能写link吧,图片你不能写navy link吧?那请问你怎么实现路由的跳转呢?哎,说老师这是个问题哈,那这怎么跳转呢?同学其实也有办法,你说我这么写行不行,我在图片的外侧呀,包裹一个link,这行吧,把这个图片作为link的标签体内容,这可以吧?嗯,然后你点图片,诶是不是就触发了,点击这个link是不是跳转了?你这么做其实倒也行,也没啥不可以的,那如果要是有接下来这个需求,你好像借助他俩就真实现不了了,什么呢?听我说我是这么一个需求,News组件展示之后,等三秒钟自动往message跳。
02:41
你注意听我说的,News组件展示之后,等三秒钟往message跳,你可能说老师简单,不就是往message跳吗?那我就写个link呗,我就写个navy link呗。同学们,你觉不觉得你所谓的link和navy link,首先得有人点吧,没人点它怎么处罚呀,是吧?所以说有些时候呢,是有这个需求的,我们在不借助这种路由链接的前提下,不写link,不写NAV link,我就写一段其他的代码也能实现路由的跳转,那么这段代码呢,我们就称之为编程式路由导航,而不是说你写路由链接,等着人家去点明白不好,来,那我们开始写一写啊,同学这么设计一个东西,我现在点击消息一,消息二,消息三,我想问各位的是,它能不能实现详情路由的切换呢?是不是可以啊,为了能让大家看的更直观,我不传state参数了,我传什么呢?PAR,一个最常用的。
03:42
回到代码当中,我去修改一点啊,来同学注意看了,我不传state了,我传P参数,那就要求注册路由的时候,你就得声明接收,对吗?那就要求回到detail组件的时候,找到pages home下的message detail在这个里面的时候,你就不能这么接state参数了,你得把这个解开,接的是不是PA参数?好嘞,打开这,关掉home下的message,点击一,点击二,点击三,注意看东西是不是,哎,留在这儿了,好,接下来我提这么一个需求,我想让某一个消息啊。
04:19
后边有两个按钮啊,第一个按钮呢,叫做push查看,Push查看消息一,啥叫push查看,就是留下痕迹查看消息一,那么第二个按钮呢,我的设计是让它replace查看,哎,Replace查看啥意思呢?我还是看消息一,但是我不留下痕迹,说老师那现在你是留不留下痕迹呢?那你自己看嘛,点击消息一,消息二,消息三我都能退回来,你说留不留下痕迹留下。说老师为什么留下呢?回到这儿,你找到你的这个message里边,你看你咋写的呀,是不是直接写了一个link to啊,我问一下你有写这词儿吗?叫replace,你有写这词吗?没有,所以说它是push,说老师,那要不就写replace吧,同学,你这要写成,那你不就写死了吗?你看消息一,消息二消息三,你后退,你看它不留下痕迹,我现在想它灵活一点,点击第一个按钮就留下痕迹查看,叫push查看,点击第二个不留下痕迹叫replace查看,OK,哎,所以说我不想写死啊,那这呢,这我还让它是默认是push,主要是它后边要有按钮来。
05:33
目录和这个终端我都收掉,每一个消息的后边都有两个按钮,那所以说呢,你在这儿是不是得补按钮啊,Button,第一个叫什么push查看,好再来一个,第二叫什么replace查看,诶,好,回到页面中看效果啊,离得有点近了是吧?哎,所以说呢,我临时写这么一个啊,NBSP吧是吧?哎,做一下这个分格在这儿。
06:04
这儿再来一个好,哎,让它有点距离是吧,点击push也能看消息一只不过呢,它留下痕迹,点击rele也能看,它不留下痕迹,那所以说同学还想什么呀,给这个button和这个button是不是都得加一个uncle时间咱先写一个啊,写哪个呢?不写push,因为默认已经是push了,所以说咱写一下replace可以吧,加一个on click名字呢,叫做this点。查看我用这词叫做受,对吧,展示,那么replace查看呢,前面就加上这词呗,Replace,走,诶,Replace show,那复制那就得有这个方法,好,里边怎么写是不是得这么说呀?编写一段代码,让其实现跳转到detail组件,且为re replace跳转对吗?嗯,那同学我问你,你觉得在这你还能写link吗?嗯,还能写navy link那些东西吗?好像都不能写了吧?哎,也就是说你如果写了link还得点吧,人家的要求是第16行行完了直接跳转完了,那问题是怎么跳转呢?来同学,这就得借助路由组件身上。
07:33
独有的API了,我们找到read密文档,大家还记不记得了,我在给你对比路由组件和非路由组件的时候,是不是说history身上有这么多东西可用啊?那我说一下啊,同学们,这个就是属于push查看,这个就是属于replace查看,哎,也能实现路由的跳转。同学,我现在就想调这个repl,你告诉我得怎么调啊老师,history.repl不,History怎么拿到this.pro.history.replace对不对?好来走起在哪呢?在这个detail里边写,嗯,往下往下A,不是在detail啊,在message啊,在这好了,this.prop.history replace好,往哪去呀?说吧,往哪去,你想往哪去,我想去详情那就写详情嘛,复制来到这儿,同学就直接这么写呀,不带着点ID呀。
08:33
不带着点title呀,对吧?所以说一个最好的体验就是这我直接收到什么呢?ID直接收到什么呢?Title,那所以说在这儿呢,就特别方便了,是不是直接写模板字符串啊,来走起啊,然后是到了符画括号带ID杠,到了画括号带谁呀抬头呗,OK同学,但是这么写啊,就不对了,为啥呢,你收不到ID和抬头对不对?那怎么办呀,你看这啊,直接这么写肯定收不到呀啊同学还记不记得了,两种写法,一写成高阶,二呢,直接在这包一个函数啊,那我采用这种方式啊,直接在这包一个函数走,然后是this.replace show传什么呢?那就传你这个Ms go bgd呗,对吧,还传什么Ms go bg.title呗,这不就结了吗?啊其实react帮你调的是这个函数,在这个函数里边,你自己亲自调了replace show,传了ID,传了title,那这呢就收到。
09:33
吧,由于你用的是replace,所以说留下痕迹吗?不留下来我们一起测试一下,打开关掉之前的啊home message,先别点这replace查看啊,我先看看这消息一消息二消息三,留下痕迹不留下,所以说走走是能后退的,好了关掉重新再来点击home,点击message,这回呢,同学你注意看,我不点击消息123这个链接了啊,路由链接我直接点这看看看能不能看,同学也能,但是这回留下痕迹吗?不留,所以说你后退,你看直接回到这儿,那同理,同学如果想把那个按钮啊也给它加上,那你说你得怎么写呢?来就找到这个按钮,给它也来一个uncle click对不对?走,那这会叫做Z点,同学那就一步到位得了,是吧,你这传那这不也得传嘛,把这些复制直接来到这儿,只不过名字改一下叫做push show对吧,展示哎,然后呢,在这。
10:33
写push show等于这个同样接到ID,同样接到title对吧,然后同样呢,是都往这里边跳,只不过呢,这用了一个push对吧,I push,那这回呢,我们再观察一下啊,重新打开一个吧,让它历史记录都是干净的,点击home,点击message push查看push查看push查看。看了,而且留下痕迹,所以说后退你看能有OK,所以说同学们借助陆游身上的history这个对象,我也可以实现路由的两种跳转,对不对?哎,那问题来了,同学们你注意看,我现在实现路由跳转了不假,我传的什么参数啊?
11:17
嗯,什么参数啊,是不是PAR参数,那我想传search参数怎么办呢?非常简单,你想传search参数,那就得在这儿做出点改变是吧,那我不想破坏这些东西啊,这些代码呢,是刚才的引导啊,这个注释,所以说在这儿呢,我删掉啊,我直接写正常的就叫replace跳转,哎,然后加携带什么参数啊,这也复制,这叫什么跳转呀。是不是push跳转呀,携带什么参数啊,是不是也是PAR啊,同学来,接下来我这么一个需求,确实想用编程式路由导航第16行这种写法,同学们就是编程式路由导航的意思啊,把这个呢复制,我也确实想让它replace跳转,但是我想携带的是query参数。
12:20
那你就不能这么写了吧,那就得把这句代码拿过来,就得改一改了,咋写detail问号ID等于?哎,那这边就得写上and的符title等于对吗?那同理,如果说你这边也想实现。诶携带谁呢?咱们这个search参数那就走这得改search,那你这儿呢。Search咋写?反正还是这行代码,原来的住调粘过来,跟这儿的写法你觉不觉得其实是一模一样的,复制往这一放就得了,OK,好来我这回呢,看一下效果,同学,但是现在呀,你还没改完,因为你说这么跳就这么跳啊,啊你这么携带了,那你是不是得对应的这么声明接收啊同学你想想对吧,你是传递P参数,你说传就传呀,这边是不是得这么声明接受啊啊那但是现在我传的是什么?是不是search,这是不是也是search,那所以说呢。
13:29
啊,所以说就是这样了,你这个链接就得住掉了,我不能再用原来这个PAR了,对吧?哎,我得用谁呢?用这个叫search给它解开是吧?你这消息及消息集点的时候传的是search,你点击什么push查看,Replace查看,那走的也是啥呀,是不是也是search参数,哎,都得是对应的,然后在这儿呢,如果传递search参数,你无需声明接收对不对,正常注册即可,那三者不都得是匹配的吗?随后来到哪儿,来到detail里边,到detail里边就不能这么接收参数了,由于你传的是search,就得把这解开啊,由于是search,就还得需要QS,这也得解开,对不对,这都是匹配的,所以说这回呢,我们重新打开页面,你再瞧一下,点击home message啊,朱老师他怎么到后边去了呢?那是因为啊来你写布局的时候,你不是确实把这几个按钮贴在人家这后边写的吗?那就跑到前前边了吗?那如果你想看的好一点,我可以把它放在最后来放在这儿,这回行了吧。
14:30
回到页面看效果,点击消息123是不是也能看对吧?同学,但是这回传什么参数啊,Search参数好,那你说我点这个push和PL能不能传递search呢?那就看你push和PL有没有写好,那我也确实写好了嘛,问号啊K等于value and符K等于value,那所以说你点的时候也是一点毛病都没有的。啊,说老师,那我点击replace呢,那你再看也是一点毛病都没有的,对不好,那同学既然聊到这儿了,那咱就再说,再说说什么呢?同学你说编程式路由跳转也是路由跳转吧,是路由跳转就有两种模式对不对?这个练了,这个也练了,那路由跳转要携带参数,那就有三种形式可以携带,那么通过编程式路由导航的re replace跳转,我带过了para,我带过了search,通过编程式路由导航的push跳转,我也看过了P,看过了search,那是不是得聊聊另外一个问题了,嗯,什么问题啊,Re replace跳转不假,但是这回呢,我携带的是另外一种叫state参数,对不对?哎,State参数走吧,那咋办?是不是这一堆都得拿回来呀,走state。
15:45
State呢,在这儿啊,来删掉删掉你就不能再写问号了,也不能再写那个占位符了,对吧?哎呀,那这怎么办呀,是吧,同学想想现在你不能在地址里边传递PAR,你也不能通过问号的形式携带query了啊,其实不是RY,应该叫search,对不对?那你说接下来这怎么办呢?
16:08
莫慌同学,回到我给你的总结里边,你说看这啊,你发现,嗯,是不是有一个东西叫state,哎,啥意思,就是传递state参数,所以说同学,人家的push啊,人家的re replace啊,都是可以携带state参数的编程式路由导航,和正常写路由链接没啥区别,你能不我也能,你能replace我也能,你能传递三种参数我也能。那怎么写呢?我们回到代码当中啊,其实就是传两个参数啊,一个是路径,一个是state,那回到这儿啊,路径我传了,接下来是不是传state参数啊,直接写一个对象啊,是不是传ID值是什么呢?啊是不是写title值是什么呢?是不是我这边接过来的东西啊,ID就是ID重名了吧,是吧,所以说可以用对象的简写方式,那么抬头这儿呢,走是不是也可以用对象的简写方式啊好来,那我们看一下给这关掉,那我通过这种形式携带了state,那你说这是不是也是同理的呀,把这一堆复制到这,那这呢写成push跳转,这也是push跳转啊,这携带state,这也是携带state,只不过这块不用replace了,用push啊,你说携带的是state,那人家这边来,我问大家,你正常点消息一是不是也得携带的是state,那我再问你,既然。
17:36
但是state,那是不是这边就得这么写呀?啊,其实吧,同学这句话和这句话是不是都一样的,对,只有这两种形式,你不用声明接收,这种形式就得声明接收好了,那别急,回到detail里边啊,你得把这也改一改,接的不再是search了,这个query string我也不要了,所以说应该接到的是state参数,然后你再找下去吧,好,那这回呢,我们再看一下啊,打开咱们的这个案例,点击home看着啊,Message首先正常点消息123PUSH模式吧,走走走,是不是能留下痕迹,好了,Local house3000,新开一个页签,走,你点击home,点击message push查看,走都能看,而且也留下痕迹了,是吧,好了,开一个页签,我再走,点击home,点击message replace replace replace,不留下痕迹,所以说以后退直接来到news,对吧?哎,这就是属于编程式路由导航。同学一定要本着这个。
18:36
原则啊,给大家捋一遍,你别乱,我不管你通过什么方式实现路由跳转的,您是亲自写的标签也好,您还是说用编程式路由导航,通过调history身上这个repl和push实现的跳转也好,我不管你通过哪种跳转,你肯定得选择一种携带参数的方式,你这么携带了,我就得跟你匹配的,这么注册路由,那么在真正接参数这个组件里边,我就得用相应的方式去接,三者必须都得是匹配的,明白不啊,那这里边呢,还有一些高级的操作,同学打开啊,我们这案例,你比如说我点击home,我点击message,我看消息一,我看消息二,消息三,我想后退,同学们是不是得点这按钮,其实呢,你可以不用去操作浏览器,这个前进后退它也是可以支持,诶,直接编写前进和后退这些代码的,也是有这API的啊,说老师那是哪个呢?回到我给大家的总结,看这儿咱是不是当时说过这个。
19:36
叫做go back是吧,干嘛的呢?就是回退,Go forward forward,就是前进,就是往前去,那好,我们试试这两个API,一个叫做go forward,一个叫做go back,那接下来呢,我是这么设计的啊,同学,我在message这个组件里边,在整个这些结构的下方啊,或者说我放在最后吧,我放在detail里边行吗?放在这个detail里边,同学,Detail是不是路由组件,它也是啊,反正如果我要放在detail组件里边,那两个按钮就在这展示。
20:09
如果有一天没有展示detail那两个按钮,反而它就不见,因为detail也没展示,但如果我要写在这儿呢?哎,反正就能好一点是吧,那就这样吧,我放在message这个message这个组件的最下方,那好回到这儿来到message里边滑到最下方啊,最下方是哪儿啊,就是HR都要再往下,哎,就是放在这个位置,我写两个按钮button啊,一个叫做回退,一个叫做前进。好,那给他俩是不是都得绑上事件呀,On a click等于后退就叫做back啊,那前进呢,就叫这个词儿吧,Forward啊,但是不叫go forward,因为go forward forward呢,是人家身上封装的那个是吧?好,那接下来这么做,这个这个那复制这俩方法你得有吧,啊,往上滑,有这个了,有这个了你再写呗,一个叫做bike,一个叫做forward,它俩都得是函数走,嗯,里边都干嘛,就调那API呗,你比如说咱先说forward吧,你想前进怎么前进,this.history点是吧,哎,叫做go forward,来自己写吧,Go对吧,Forward啊,那你这个后退呢,当然叫做go back对吧?B肯定得是大写的好。
21:37
好,那咱瞧瞧啊,看看它能不能前进,能不能后退,回到页面看效果,我先用push查看的方式看一看二看三,我想回退二一,我想前进二三是不是完全可以啊,啊,这俩按钮之间呢,我再给你写一个分隔符吧,嗯,NBSP,好,哎,回退前进是吧?所以说同学你看我不写路由链接也能实现push跳转,Re replace跳转,也能携带三种参数,甚至我还可以直接回退和前进,但是有一个API还没跟大家说哪呢,就是这个go go back是回推,Go forward的是前进。同学你说这个go,那直接跟大家说一下,这个go呢,就看你传的数值,这个N代表一个number,如果你传的数值是一,啥意思?
22:31
前进一步,如果你传的二前进两步,三呢,那就是三步,那如果你写的是负一呢,那就是后退一步,负二呢,后退两步,嘿,就这意思,你比如说这个go啊,咱练习一下来到这个message里边啊,Button,然后呢,我也给它加一个on click啊。走叫做this点,那就只能叫go了是吧?哎,这也叫go,好了,划到上方,在这走一个go走起,那这怎么办?this.pro.history.go啊然后呢,我先写死,我这go呢,写一个二,完了你看效果啊,也就是往前前进两位好,先打开一个页面啊走来到这儿点击home,点击message push查看,哎,这里面没写东西是吧?哎,写一下写一下,往下找,找到这个按钮啊,那叫做go。
23:26
好,来这回看效果啊,看一看二看三。然后注意我回退回退到二,回退到一,同学现在我点go是不是往前前进两位,那所以说到二是一位,到三是不是两位,点go看直接到三,哎,我们再测试,如果说你这个go里边写的是负二,那就是往回退两步啊,那我们再试一下啊,新开一个页面啊,来走home message,看一看二看三,点击go回退两步,你看是不是到一,哎,所以说这个go呢,能够用一个人去表达go back和go forward,而且呢,能传说你到底前进几步和退几步,这就是属于编程式路由导航,行吧同学其实玩的就是谁呢?History这个对象身上的API是吧,你看前边这两个跳转,你打开不也是history身上的API吗?嗯,好,那这小节呢,我们停一下。
我来说两句