00:00
好嘞,各位说完了独享路由守位之后呢,我们给大家讲最后一种路由守位,它的名字啊叫做组件内路由守位,哎,顾名思义就是在一个组件里面去写路由首位,而不是说像现在啊在这个路由配置文件里面去写,那接下来呢,我就把这个配置文件里面所有我写过的这些首位啊都给它注掉,把这个独享的注掉,下边还有一个就是全局的这个后置路由首位注掉,那接下来呢,我选择一个简单点的组件去研究那个组件内路由首位啊,选一个功能复杂的,大家都看晕了,选一个里边最简单的就是这个about组件,OK,打开这个about,然后呢,我直接给大家写那两个守位的名字啊,第一个人叫做before,然后呢,Wrote啥意思路由,然后呢,进入,哎,读读这名字,当路由进入之前,那么还有一个各位叫做before,还是root,然后叫做live,当路由离开。
01:00
之前哎说老师明白,这就是前置,这就是后置,诶不对,不要这样说,各位,我给你说说这个before road什么时候会被调用走着叫做通过路由规则进入该组件时被调用啊,那这块呢,给它复制一下,叫做通过路由规则不是进入该组件,而是离开该组件时被调用,它跟前置和后置是两码事儿,同学只有一种路由守位,我们说前置,我们说后置,谁呀,就是全局路由守卫,这里面我们说前置和后置,那至于说独享的这个,各位他只有一个,我们也就不提前后的事儿了,对不都算是前没有后了嘛,没有,那after嘛,啊那在这儿各位不要提前后这个概念,那是不对的,为啥说不对呢?来各位啊,咱就这么举例子说,目前呀,你所处的位置是斜杠home,然后。
02:00
后呢,你点击了页面上的那个斜杠about,于是乎啊,你就想切到about这个里面来,对吧?我就把绿色框里的这个动作呢,叫做切换,那如果说你提前后这个概念,那是不是意味着本次切换之前我会调那个前置首位,哎,那切换之后呢,是不是得调那个后置守卫,也就是说我从后来到about这么一个动作,其实会引起两个守卫工作,一个是前置守卫,一个是后置守位,对吗?各位,哎,那我们在这里这两个跟前后没关系,来给你描述一下各位目前所处位置是哪啊,Home,然后呢,你还是点了页面上那个about导航项,你想来到哪儿,你想来到这个about,那听我说各位,当你来之前,哎,当你进入这个about组件之前,那么有一个人调用了谁呢?就是刚才我说的这个人,Before。
03:00
Enter就是它在这调用了,说老师那进入之后呢,同学进入之后没有后文了,所以你不能说它是后纸,进入之后没东西可掉了,停了没了,各位啊,哎,说老师那不对,那这什么时候掉啊,听我说各位,如果这个时候页面上还有一个导航项,比如说呢,叫做斜杠test,你点完这东西之后,同学你是不是想从about当前的位置离开呀,你是不是想走啊,那么你走之前各位你肯定啊,是得来到这儿,最后我知道肯定得来到这儿,但是你得走,你先从about这走,那么在走之前各位人家给你调的是哪个,诶给你调的是这个,就是before RO live对不对,体会体会。啊,那你说,哎,各位,我从后切到about,是不是引起前置手位掉一次,后置手位掉一次,那我从about再切到别人那儿呢?各位是不是也是一次切换啊,你只要有切换,前和后都是相辅相成的,前掉完就切换,切换完就掉后是不?各位但是在这儿可不是在这儿呢,有没有种感觉,我得看你的动作。
04:07
你到底是来你还是去,你来我给你调这个in特,你走我给你调这live是不?哎,就不存在什么情况呢?像这边说我从home到了about前掉一次,后掉一次,不是的,各位你看你从home点到about同学前确实得掉一次,其实不应该管它叫前了什么呢?叫进入之前是不是得调意思,但是同学我没离开,为什么要调这个呢?你得离开再调这个是不是?但是同学后置守位可不是这个意思,后置守位是你该切换就切换,切换完了我立刻就掉是不?各位,哎,所以说可别这么说啊,说他是前置,它是后置,那可不对啊,说老是来,那你输出一下,我看看是不是这么回事儿啊,你不是说吗?有人呢,这个来到这个组件的时候就得输出吗?那试试呗,走哪个组件APP输出什么呢?啪,中间呢再加几个杠OK吧,各位啊,来读一下吧,这先不考虑,来这先注掉同学先看这个什么时候调这个啊,通过路由规则进入该组件时被调用说老师你净说废话。
05:08
那不通过路由规则我还能咋的能进入这组件呢?我肯定得点嘛,我点about那个导航项吗?点完了路径变成斜杠about吗?完了前端路由器监测到了吗?监测到之后怎么办?匹配规则吗?规则匹配完了咋的?诶,给我进入这个组件展示吗?说是不就应该是这么个流程吗?嗯,各位听我说,有的时候你不是通过路由规则进入这个组件的。老师,那是什么时候啊?我让你看看他是什么时候来到APP里面,各位我做一件事多引入一个人,谁呢?就是这about好复制放在这儿多注册一个呗,嗯,来,把about放在banner的上方啊,这回他很厉害了,About呀,直接在那个banner的上方展示,同学,我问你,你说我这算是通过路由规则进入这个组件吗?不是同学,我可没有点过导航项,是页面一上来我什么导航项都不用点,我在这就引入了吧,我在这就注册了吧,然后呢,在这就呈现这个组件了吧,怎么呈现呀,得进入这个点viewu文件去分析它里边的配置是不?各位诶,所以说体会一下这个进入,那你看在这儿各位来从头开始看,我把这些都删掉,同学一上来我点没点导航项,我点了吗?我没有点啊,没有点任何导航项,同学在这是不是出现了我是about的内容,我问你控制台有输出那句话吗?有输出这个东西吗?就是什么APP before RO inter,没有吧,所以说同学你看人家没叫before inter before inter好像是你通过什么方式进入它都能执行似的,人家说的还不够明白吗?叫做B方RO enter对不对?通过路由规则你进入啊,那啥叫通过路由规则呀,你得点嘛,是不,各位哎,好了,回到这个APP里面,我把这块呢临时给它注掉是吧,要不干扰咱们啊,那回到这儿呢,也给他这块给它注掉,那这儿呢也临时给它删掉,OK给删了吧,啊回头大家就晕了。
07:00
来保存回来各位啊,一刷新我点啊,你看效果,看控制台的输出走怎么样,诶各位APP before RO是不是通过路由规则进入的,说老师不对,咋啦,你这没有展示吗?回来你看代码完了,你告诉我为啥没展示啊,这句话说出来为啥没展示啊,没有放行吗?对吧?各位,你没有放行的结果就是人家说要进入,在进入之前人家掉了这个结果走到这儿人家不敢往下走了,为啥呀,你没有掉N是不?各位,哎,好了,这回看一下效果啊,点击about,这不就能进入了吗?是吧?哎,舒老师这挺好的,嗯,这就不是人进入的时候不就可以吗?舒老师,这里边写什么逻辑呢?这里边逻辑可以写太多了呀,各位,就刚才健全那个对吧?我看一下学校名,我再决定让不让你看这组建这个逻辑就可以写在这儿呢,你写在这儿只不过是谁独有的about,独有的是不?各位啊,那来写一下呗,找到那套规则是不是在这儿呢?然后呢,把这里边一堆东西都给它带走嘛,然后回到这个里面,直接给它粘到这个位置嘛,当然这个N一并带走,哎,逻辑是完整的吗?走,OK老师这回就行了呗,不行,各位,当年你在配置路由的时候,你没有说呀,这个about需要进行权限的校验,你得。
08:15
告诉人家,也就是说得把这玩意儿咋的哎,拿过来,然后给它放在这儿,这回不就得了吗?啊,这回也可以加校验了,来我们试一下吧,各位啊,点击后切出去,现在呢,我要进来about老师,这不能看吗?能看是因为我学校名对是吧?你给他改不对了,来改成二好了,这时候你切出去,等你再切进来的时候,各位走着,你看学校名不对,不让你查看是吧?各位,哎,OK,这叫做路由进入时,好,那除了有路由进入时,那是不是还得有路由离开时啊,走着啊,那什么时候触发这个通过路由规则离开该组件时被调用,那来在这写一下啊consolo输出什么呢?跟这个是一样的,诶,刚才那东西啊,我还删了,同学,这个删掉不要叫前置了啊,这块得删掉,不要叫前置了,然后还有一个地方也得删掉,就是刚才我们写这个独享的时候,各位找到路由配置文件在这儿,最好也别叫前置路由设位,就直接写一个词儿独享就得了啊,不要。
09:15
引起别人的误会啊,来,在这儿写上它。来把这些东西呢,给它复制过来,给它放在这儿,我们再验证一下啊走诶也有to也from,嗯,那来看看效果啊各位,你得切走的时候才能触发这个是不是,嗯,那首先呢,我得先进来对不对?嗯,回到这儿,那咋进来呀,名得改对了,要不你进不来的,走来硅谷回到这儿,给这儿呢清空好了,看啊各位,接下来我要进入这个about了,走进入的时候,各位你说是不是输出了这个to,还有这个东西是不是呢?是不是,那from呀,你仔细看各位啊,你说进入的时候那个to永远是谁,关于就可以这样说,你从别的地方想进入到这儿,那么to肯定是他,那至于这个from那就说不准了,说不定他上一次点的是哪儿,是吧?各位啊,这东西挺烦的,来找到是about,这里边我写了这么一个东西来给它注掉啊,回来再看一下效果啊,我之前呢,比如说举个例子,各位啊,我是在哪呢?你看现在其实你切不走了,为啥你切不走了呢?你看你切不走,哎同学,为啥,因为你这没放行是不?哎先把这玩意。
10:20
掉注掉啊,回来刷新一波啊,从最开始点啊,我先看一下home,然后呢,我看这个message我能看吗?各位哎,往这边点央视太丑了,接下来我想进入about点击同学你看to to永远是哪,永远是关于,但是你是从哪来的?诶,你是从消息那边来的对不?各位,因为我刚才是在message嘛,是不好了,来把这个呢给它解开,叫做离开始好了,看效果啊各位,刷新一波,目前我在哪啊,About想不想离开呢?想来接下来点321走。离开吧,你看before RO,当然这不对,得换一个名字啊,叫做live好了,来再看各位把它助调保存刷新一波,切出去啊,再切进来把它清掉,然后回来把这个给它解开,走,这回就对了啊,单词刚才没写对,来,走着,我要切走了,各位走你诶是不是离开呀?啊,那你切走了,你要去那儿啊啊,你要去主页,为啥去主页儿啊,因为刚才我是点的这儿离开他的,对不?那你从哪儿离开的呀?肯定是从关于同学觉不觉得两个东西是定死的,就是当你进来的时候,那个to相关的信息一定是about的,当你离开的时候,那个from的信息也一定是about相关的,对不?各位啊,那现在你说为啥离开不了呢?刚才咱也看到了,不卖关子了,各位咋的离开的时候你没放行啊,你是不是得放行啊,对吧,各位啊,回来再看一下效果,我想离开那就离开呗,我想进入那就进入呗,是不,各位体。
11:53
注意一下,不叫前不叫后,叫进入和离开啊,也是两个守位,一个是进入时守位,一个是离开时守位啊这个东西呢,同学,其实我们用的也不算特别多啊,你就比如说我还想实现这个效果,各位就是点击about,就关于点击home呢,就是那个主页,那你怎么写?哎,说老师啊,那我明白,就是把之前啊,咱写的那个后置路由守位里的东西啊,给他拿过来不就得了吗?哎,我放在这儿,你看这是前,这是后,那你就犯错了,来,你自己瞧效果去啊,各位回来,我这学校名啊,我看一眼啊,我得改成对的啊,要不一会儿不能切换了啊,这样从头开始啊,各位一上来是不是硅谷系统啊?嗯,我点击about,哎,是about内容,但是我问各位名改了吗?这名改了吗?没有改为啥呀,错就错在你把它错误的当成后置路由守位了,其实它不是后置路由守位,得是离开的时候是不是才能处罚他呀,哎,所以说你写在这儿是不可以。
12:53
的说,老师,那我就想实现这个切换吗?可以啊,各位,他该写写你把全局的后置路由首位,这个收尾的人,这个善后的人,你给他解开不就得了吗?啊,来瞧一下效果,各位啊,从头开始走,我想看about,那就关于嘛,我想看home,那就主页嘛,我想看news新闻,Message消息对不?各位,哎,这就是组件内的路由首位啊,那这个东西呢,同学,它的场景就是,如果你这个组件里面你想单独写点它独有的这些逻辑,哎,你可以借助这两个守位,OK,不要错误的理解为前和后OK,这不墨迹了,来看一下我们的总结,各位,组件内守位就是进入首位和离开首位,进入的时候同学有要求,你得通过路由规则进入,你直接自己写个about标签,那不行,离开的时候同学同理,你得触发路径的变化,完了浏览器完了这个。
13:47
你得触发路径的变化,然后前端路由器监测到了,然后给你匹配规则离开,这才算通过路由离开,对不对,通过路由规则离开,然后呢,调用这个OK,这里边呢,都可以写一些业务的逻辑啊,那这一小节呢,我们听。
我来说两句