00:00
好嘞,各位,那在这一小节呢,我们给大家扩展一个跟路由相关的知识点,叫做路由首位,正常来说呢,这个知识点得是在旅游项目里面借着一个功能去给大家讲的,但这一次呢,我们选择讲基础的候,就把这个概念呢抛给大家,回头呢,你去看我们上硅谷的那个V项目的时候啊,压力也就没那么大了,当然呢,你听项目的时候,讲项目的老师也会再给你讲一遍路由首位的,到那时候呢,你就当成是一次复习啊就可以了,之所以我们讲两遍,是因为这个东西很重要,开发当中用的很多。好了,各位,路由首位这四个字摆在你面前,你能联想到什么呢?古代的时候啊,有这么一个官职叫做御前侍卫,不知道大家了不了解啊,御前侍卫呢,一般都是一些武功高强的人是不?他们的职责只有一个,就是堡君王的安全是吧?哎,一旦发现有人靠近了,不怀好意直接拔刀解决掉是吧?哎,所以说之前还有一个职位叫做御前带刀侍卫是吧?比御前侍卫能够更高一个级别。好了,咱不聊太远啊,各位,咱学这陆游守卫和这御前侍卫呀,干的活儿是一样的,只不过陆游守卫保护的不是君王的安全,那是谁的安全呀?嘿,陆游的安全?嗨,舒老师开玩笑吧,陆由咋的还能有人身安全问题,还得保啊。回到页面里呢,跟大家说一下啊,我目前的这个页面里面有三个导航区啊,分别是这三个位置,每一个导航区里呢,都有一个导航项啊,什么about呀,Home呀,News message,我点击任何一个导航项,一定会在合适的位置给我呈现一个路由组件的。
01:40
的,比如说点了about,那在这儿呈现的是about路由组件,如果我点击的是home,那这就是home,点击的是messages,那就在这儿呈现的是message,这个路由组件是不?各位这是一个很正常的交互逻辑,你点谁诶,我就给你看这个人所对应的路由组件。但是有些特殊的时候,各位不是所有的导航项你都能随便点,你得符合了某些要求你才能点。
02:05
你就比如说各位,现在我就提出来一个要求,About和home这两个导航项随便点啊,我不管你所处的位置是哪儿,我不管你目前的状态是什么,随便点,你点了我就给你看,但是这个news组件和这个message我可就要提出要求了,我的要求是只有学校是上硅谷才能看news和message啊,说老师只有学校是上硅谷才能看这两个,那学校存在哪儿呢?哎,同学为了方便起见啊,我直接把学校啊存在local store age里,哎,直接往里存,直接写school,哎,然后叫做什么呢?At硅谷,OK,说老师我不想存在这儿啊,我想存在这个VIVO X里面,哎,也行啊,各位是不?我就怕这里边混着VIVO X,再混着路由守卫,而且路由守卫还有三种,我怕把大家绕晕了。所以说同学要真正想完成一个像点样的功能啊,其实我们得项目里面见,准确的说,我们写这些东西,其。
03:06
是称不上是功能啊,甚至说是案例都有点牵强啊,就是为了讲这知识做一个演示,好吧各位,哎,我就不往这里边折腾了啊,我就直接放在这儿,School at硅谷,哎,我的要求是你点击这两个东西的时候,你得帮我校验一下,校验什么呢?学校是不是at特硅谷,如果是,嗯,这俩都可以看,如果不是,这俩不能看,说老师啥叫不能看呢?不能看的意思就是你点击这个news,你把鼠标点碎了,这块也不出现news组件,我现在肯定是一点就出现是不啊,一会儿就不是这样子了,点message也得去校验一下,OK啊,说老师,那这也不是安全呀,刚才不是举例子吗?哎,所以说同学不能说安全,我说这俩字儿叫做权限啊,各位想想,有一些东西你得是登录了之后,你再点是不是才让你看呢,同学咱就不说别的啊,说那个用户的个人中心,你能上来就看淘宝的个人中心嘛,肯定不能,你是不是得登录啊,哎,所以说同学这是一个。
04:06
权限的问题来吧,写写吧各位,这俩人无所谓啊,想看就看啊,主要是这个news和这个message,每次切换的时候我都得问呢,你的学校是不是爱特硅谷是吧?接下来怎么做呢?哎,同学,回到这个图里啊,咱当年啊,是不是给大家做了一个图?哎,看图说话,各位,整个前端路由的工作原理就是用户点击哪儿这个导航区,来,我给你换个颜色,换成这个红色的,用户点击导航区,随后引起路径的改变,前端路由器监测到进行规则的匹配,在合适的位置给你呈现组件是不是?各位?诶,我们就分析一下在这些环节里边的哪一个环节去加这个校验最合适,朱老师在这儿吧。啊,我告诉用户一声,如果你没登录啊,你就别点同学,你觉得这事可能吗?哎,他就那么听你话啊,你告诉他你说school不是爱特硅谷啊,你可别点那个news和他说好不可能的是不各位所以说在这儿呢不是。
05:06
说老师那难道是这儿呢,那就点的时候我让这路径不变,同学这也不好控制,为啥说呢?你想想啊,同学,我们是不是用的那个RO link那个标签啊,那里边只要写了to,同学你只要敢写to,你只要敢点,你点路径就变,没得商量,控制不了,所以说同学正确的解决方案啊是在这。跟谁商量商量,跟谁研究研究路由器,哎,你跟那路由器说,你说兄弟啊,我麻烦你一件事儿,就是如果以后有人访问的这个路由啊,是home下的这个news,那你帮我做一件事儿呗,你去local storage中,你把那school啊读取出来,你帮我看看是不是at特硅谷,如果是组建正常给它呈现,如果不是呢,那就别给它呈现了,这才是一个正解,OK,所以说引导来引导去,我们发现了,其实找谁聊最合适啊,路由器来吧,走,找到路由器,哎呦,这么多的东西是吧?哎,大家说老师啊,太烦了,都看晕了啊,我整理一下这东西就简单了,你比如说我把这一折叠,同学走啊,是不是挺清晰的?哎,这些不都是子集路由吗?那接下来啊,各位我做一个事情啊,做一个准备性工作,就是我让每一个路由都有名字。
06:19
哎,你比如说about已经有了,叫关于,但是这home没有是吧?来配置一个同学也别叫home啊,避免这个歧义,我叫主页啊,把它复制,再找message,这叫啥呢?拼音呗,消息好,再复制啊,这是详情,那再往下呢,没了是吧,它是藏的最深的一个了,OK,每一个路由啊,都有名字了,来折叠起来路由的规则呀,你配置好了啊,把这打开啊,把children折叠起来,能让大家明显的看到about,还有home是什么?是一级路由是不?哎,About没有二级路由,这个home才有。哎,好了,这不磨叽了啊各位啊,那接下来你得找谁聊聊,找谁找路由器聊一聊,找路由器怎么聊啊,你不能再这么写了,你这么写的意思就是创建出来了一个roer的实例对象,然后瞬间就把它暴露出去了,你没有机会跟他商量,所以说啊,你要这样做,把这个带走,先接住这个什么呢,路由器的这个实例对象好,随后在这呢。
07:20
肯定是得暴露,拿过来这个roer,暴露之前先跟他商量商量,给他加一个路由首位,OK,那怎么写呢?找到roer,这个时候就得借助他身上的一个特殊的API了,叫做before each,它呢是一个方法,可以调用。哎,同学分析一下,Before是不是什么什么之前each什么意思啊?Each有每一个,每一次,每一人的意思对不对?每一什么什么说老师,那这连起来念也不成句儿啊,什么叫每一次之前呢?在每一次什么之前呀,哎,来跟各位说啊,在每一次路由切换之前啊,想想从about跳到home,哎是个切换,Home跳到news a也是一个切换,那也就是说每一次路由切换之前都也又说不下去了,都咋的呀?哎,都会帮你调用一个函数,那函数呢,要求你在这儿写出来,写普通函数行箭头函数也行,OK,各位走着,哎,那也就是说各位看好了啊,这个东西就有点像set out完里边这粉色的呢,就有点像定时器所指定的那个回调是不?各位我调set out的目的是指定一个定时器的回调函数,那我调before each的目的是什么呢?指定一个路由每次切换时候,哎,所调的这么一个函数就是粉色的这个,OK同学,这就写完了,嗯,写好注释,那这叫什么呢?哎,全局前置路由首位,我加了两个限定的词。
08:53
一是全局,怎么体现出全局呢?听我说各位你这里边儿不是配置了这么多的路由吗?你从A路由跳转到B路由的时候,只要你跳,只要你形成路由的跳转,那么你放心,就是这个黄色的函数一定会被调用的,而且是什么时候调用呢?各位是在切换之前进行调用。
09:18
哎,就有点什么感觉,各位这个御前侍卫一定是在这个君王要发生安全问题之前,他得做出一些反馈是吧?各位你不能说砰一下已经没了,你这是吧,晚了你得预判出来,所以说各位这个笔方的意思就是在切换之前啊,每一次这个路由切换之前啊,这全局啊前置也体现出来了,对不对,前嘛之前嘛啊来走再写的详细一点啊,就是什么时候调用,每次路由切换之前咋的被调用,其实还有一个时候被调用,各位就是初始化的时候被调用啊,然后就是每次路由切换之前被调用,也就是说目前你所处的位置啊,比如说是斜杠到完了,你点按钮了是吧,我想去斜杠后面这个路由,那这就是一次切换,在切换之前,诶注意掉这个东西好来我们验证一下啊,在这里边呢,做一。
10:18
和lo输出什么呢?艾特符,我们就看看是不是这两个时候啊被调用来回到页面里面看一下效果,那这样啊各位我呢,给它新开一个页签啊,让它干干净净的复制给它放到这儿好走,然后呢,控制台给它打开,嗯,一上来同学看,一上来看是不是就有这一次输出,哎,这就是初始化的时候,你这套规则不得执行吗?整个这个in带点GS不是得运行吗?一运行哎就帮你执行一次,好,那接下来呢,我切换啊,我目前在哪啊,我目前所处的位置就是一上来的位置在这儿是不?我想看看about,注意啊,我去点about。走,我点没点,点了还说老师不对呀,这about怎么没出来呢?我们一会儿再说没出来这事我问你同学,刚才我所处的位置是这儿,然后我想去about我一点是不是切换是,那么在切换之前掉不掉它掉,那同理,我点home呢,走是不是也掉。
11:14
哎,OK,这是简单,只要你想切换,在切换之前臂保里掉,那问题是为啥没切过来呀?这怎么什么东西都失效了呢?这咋回事啊?诶,那咱们就得研究一下它所接收的三个参数了啊,分别是什么呢?一个是to,一个是from,一个是next。哎,同学从字面上理解,你说这to啥意思呀?就是你要去哪儿,那from呢,就是你来自于哪啊,用一个生活中的例子去说啊,你去上学,那么to就是学校,那么from呢,就是你的宿舍或者是你的家,是吧?各位,哎,我们大家输出一下啊,这两个东西,一个是to,一个是from,嗯,来回来,一上来同学有没有to,有没有from,有,但是一上来这两个东西吧,同学对于我们来说几乎没什么用,而且特别无聊,你看啊,打开一上来的兔说你要去哪儿?
12:03
你看要么就是空对象,空数组,要么就是none等等这些东西,然后pass,你看这路径不是斜杠about,斜杠后面就是个斜杠,斜杠代表啥呀?就代表这东西,就代表一上来啊,而且你看同学from是啥意思,就是你从哪想去,同学你发现起点和终点咋样,是不是长得一致,哎,所以说一上来这一次吧,我们根本就不关心的啊,来给它清掉,主要是切换的时候,各位啊,我目前是不是这位置啊啊,我想去看那个about,想切到about啊点321走各位点了吧,你看告诉你的多明白呀,同学这个兔。是不是在这呢?那个from是不是在这呢?先看一下to,你发现打开之后同学果不其然,你看名字,名字来啥,关于路径啥,斜杠about,有没有一种感觉,把你要去的那个目标路由的信息都给你了,什么叫目标路由?你要去哪儿吗?所以说to带着大家看完了。啊,然后再看什么呢?这个from from就是你从哪去,那你从哪儿啊,从路径什么也不是啊,是不是从这开始去啊,哎,OK,清掉,那你说如果我此时此刻再点一下home呢,那你想一下呗,你看一下路径,目前这就是from,那to是哪呢?To就是home呗,一点,诶看同学to是啥啊,内幕主页就一看这个同学,我都不用过多解释了,大家一看内幕主页马上就明白要去的是哪home,然后点开这儿呢,那不还是目前所处的这个位置吗?OK,这就是to和from,哎,也就是把你来自于哪里,你要去哪里,人家拿到了朱老师,但是怎么着还是切换不了啊,诶,那我告诉你啊,各位,就是你这个路由守卫,目前来说把所有的东西都拦住了,也就说有种什么样的感觉呢?你为了你家安全,你雇了一个保安站在门口,结果这保安啊,可倒好,谁都不让进了,包括你自己。
13:53
啊,就你进来的时候,他也诶伸出手把你拦住,那现在的问题是我得让他抬抬手把我放进来对吧?诶同学谁呀,Next就有用了,Next啥意思?
14:05
接着往下走呗,是吧,哎,俗称放行,如果你不写next,那同学每一次路由切换都会掉这个粉色的函数,一到这个粉色的函数里面咔就卡住不敢往下走,为啥你没有说放行,他不敢往下走,你这么一写不就可以了吗?来,回头看一下效果啊来,在这儿呢,刷新一波了,嗯,一上来这两个咱说了没啥营养,咱也不关注了,清掉,然后呢,我想去about看效果啊走。想去哪儿就去哪儿呗,对吧?各位啊,那这回呢,看一下效果啊吐哪儿关于啊,那从哪儿去呢?从最根儿上那会儿开始去,那我跳没跳过来啊,跳过来了,那你说接下来如果我再点home呢,想好啊同学,From是哪儿,From就得是这儿了,To哪to的就得是这儿了是吧?各位来走看to哪儿主页from哪儿关于这不就行了吗?啊说老师行行是行了,但现在你没实现功能啊,你看你这些东西切换的时候,这不还是想看谁就看谁吗?对吧?啊老师你没完成功能是呢,那咋完成呢?各位,反正local里面呀,我已经把这个艾特硅谷这个学校名准备好了,接下来你要做的事儿,那就是怎么着,各位判断一下什么时候放行,什么时候不放行,对不对?各位啊,什么时候放行?学校名如果是at特硅谷,那就放行。
15:24
那说老师我放行的时候,我怎么知道他要去哪儿呢?那to给你了呀,比如说我点击news说的多明白,各位打开这个东西告诉你了,你要去的是哪儿?To to哪home下news吗?啊,你用这个full pass也行,用什么pass是不是也行?哎,这不就可以了吗?啊来,回到about里面刷新一波,来写写那段代码,回到这同学动态的决定是否放行,那得怎么写啊?If判断我得去local store age中去得到啊,不是set item,是get item得到谁呢?School,我看一下你的值是否等于at硅谷,如果等于咋的放行?那如果不等于呢?
16:04
不等于就不放行呗,哎,舒老师这回不就写完了吗?嗯,那你看一下效果呗。哎,回到这儿啊,刷新一波,看看home,看看about啊,都能看,我想看看news,能行能行,哎,说老师你这很正常啊,因为你符合要求吗?啊,那你改一下老师啊,你改成艾特硅谷二好学校可不是艾特硅谷了。来,从头开始走着啊,回到控制台,我想看看about呀。点不了,哎说老师,那你每次点的时候他才有输出呢,很正常吗?各位你想一下,目前我是不是点了一下about,是不是要进行路由的切换,对,那么切换之前应该掉谁应该掉这一堆掉没掉,掉了所以输出了,但是咋的各位学校不是艾特硅谷,所以说我就没有走这个就没有放行,但是同学你别忘了我的需求,我的需求是这两个,随便看那个news和才是加上权限控制的是不是各位。
17:04
那也就意味着你不能在这儿暴力的,直接就看啊学校是不是爱特硅谷,你得问问人家哥们你去哪儿,你要是去这两个地方我不管你,但是你要去news和message我得管你,也就是说各位咋的,你得判断一下to里边的pass,就是人家要去哪,或者说你不判断pass,你判断name是不是也行,哎,我得知道你去哪儿啊,好,那这怎么写,就是这个判断的外边你还得再包一个判断,对吧?前提条件是你要去的那个地方的pass,它得是什么呢?第一种情况,它可能是home下的news对吧,或者是to。第2PASS它的值呢,是这个后下的messageage对吧?各位如果去的是这两个路由,我再加上这判断,那如果不是这两个路由呢?也就是说第一个if判断如果没进来呢,那同学别限制人家,如果没进来是不放行。如果进来了,你还。
18:04
不是爱的硅谷,那我当然走不了,如果进来了是爱特硅谷,那我再走呗,是吧,各位啊,那如果说你想写的好一点,你这其实可以加一个ELSE4,然后alert弹窗一个东西叫做什么呢?学校名不对啊,无权限查看,OK,来个感叹号,这不就得了吗?啊,这回来咱看看效果啊各位把这一堆复制,新开一个页签走着啊,控制台呢,给它开好,目前呢,我的学校名是at特硅谷二是不对的啊,但是我点about和home的时候啊,它不应该限制,我是不来清掉啊,看about,诶,我看home,当你点击news的时候,诶,学校名不对,无权查看,点一下确定。啊,而且你注意同学这个首位非常给力啊,咱说了是路由切换前帮你调,那函数切换前如果拦住了各位,你发现路径是不变的,对吧?我想看看messages告诉你学校名不对,无权查看,这块肯定得走是不?但是在这儿呢,路径是不变的,哎,我再看news,你看他也会走的,是这意思不?各位OK,你看这不就加上了权限的控制吗?如果说不想用路径,说老师这路径太麻烦,你当然可以用name对不对?哎,那这儿呢,同学直接写叫做新闻,那在这儿呢,直接也给他改呗,诶这叫什么呢?消息也是可以的,来看一下效果啊,从头开始报到,后面随便看这个不行,诶说老师不对呀,这过来了呢,哎,那你看看吧,可能你的名字啊配置的有问题,来呗,分析走这点内等于新闻啊,那咱不是新闻是吧?诶咱看一下配置的是不是新闻啊,打开一下news啊,原来如此,没有配置名字是不?各位来吧,给它复制一份,走你看这小问题哈,来写上叫。
19:49
说新闻我怎么模糊的记着刚才写过了呢,来吧,给它补上啊,这会儿呢,折叠起来好了,回到这儿呢,再给它刷新一下,其实马上就有效果了啊,我那一改这边就弹窗了,无权限是吧?嗯,来,回头看一下这儿啊,走。
20:02
走诶,他可能卡住了是吧,那给它关掉啊,整个呢,给它重新开启一下,停掉重新的编译一下。OK,可以了是吧,啊,这回再打开,如果他反应慢,你就给他关掉一次,你看我改代码了吗?没改是吧,停掉一次,再重启一次就好了,来控制台呢,开好刷新一波啊,我想看about,想看home,那你就看,点击这个没权限,点击这个也没权限,并且路径还不变是不?各位OK,完成了。
我来说两句