00:00
大家好,我是学习园地的特约讲师高洛峰,上节课我们学习了重定向和联名,那重定向呢,是指我们访问一个路径的时候,会给我们跳转到我们指定的其他的路径,那这个时候呢,就要用重名项,别名是什么意思呢?就是我们不止可以通过一个名称或者一个pass路径来访问一个页面,那也可以给他起多个名字来访问同一个页面。就是这样的啊,成像和别名我们学完了,那这节课呢,我们来学习一个新的知识点,就是导航首位。什么是导航首位呢?那我们在学网络请求的时候,比如学X的时候,那么我们有什么?呃,拦截器有前置拦截器和后置拦截器,也就是我们在异步请求网络的时候,在请求之前我们可以有一些拦截的东西,对吧?可以自动调用一个方法,在方法里边我们处理请求之前的事情,那请求回来之后,我们可以处理呃,一些请求的结果,比如说他如果有错误了,根据错误信息给用户的提示,对吧。
01:00
这就是在R里边有拦截器,那在我们路由里面,路由呢,也分为什么呢?从一个路由跳转到另外一个路由。也就是从A路径跳转到B路径,那在跳转之前有一个前置首位会自动调用一个方法,那这个方法里边呢,你可以处理一些跳转之前的事情,那跳转过去了对吧?在内容没显示之前,你可以用一个什么后置钩子。其实呢,就是前置守卫,后置守卫,只不过官方的叫法就是前置叫做守卫,后置呢叫做钩子,是这样的,其实是一个意思。那不管它叫什么名称啊,总之一前一后,也就是你用来什么跳转。的方式来首位导航跳转的过程有一个之前有一个之后嘛去处理,那比如说什么时候用。那在我们做一个页面的时候,经常你比如说我们前面写的这样的,呃,路由跳转的时候,不管我们怎么跳转,你看我们标题变化了吗?没有变化对吧,所以呢,处理标题。要是你每一个都带有标题的,我们可以这么做,但是呢,这前端渲染你做完之后也不用太有利于Su啊,但是给用户的感觉是做,那我们后面会学什么?呃,后端渲染的时候才能渲染出真正的拍头标签,那么去做啊,那这是标题。
02:11
再有,如果我们做的一个项目都是登录的,如果没登录,强制跳转到登录页面,那我们就可以在前置首前置首位里边做,不管访问哪个路由,如果他不是登录的,都让他跳转到。让用户去登录,那这个时候呢,我们就得用到这种前置守卫帮我们完成。那语法上呢,也很简单,来我们。先模拟一个呃标题的一个方式啊,先模拟标题方式,比如说我们不用前置首位,后置首位,我们怎么能切换的时候来改变这个标题呢?那我们就需要在每一个呃页面里边,那当然咱这都是组件,并不是单独的页面,能把它看成单独页面,比如说在关于里面。在这里边,那我们呃加上一个记不进生命中期有一个加T对吧,创建完这个组件,但是还没挂载呢,挂载不是mot嘛,这个加载数据嘛,那你可以在Mo里边,这里边都可以啊,在哪个里边都行,那比如我就在创建里边,那我用document里边开头是不是指的标题这里边比如说就是。
03:08
我啊。喜欢书法,关于我们。这个,然后比如说我们到后页面这里面我们也加一个。嗯,都在这个里边买。因为这些方法是自动执行的,Document页还是生命周期方法,咱们讲过的对吧,这是首页,这是首页,然后呢,你比如说文章页和订单页,配置页这些都可以,对吧,用户吧,在这里边我再写一个。啊,这个里边这块。不是在这里讲它同级的C这个,这里边我们document.title这块,比如说我就叫做个人中心,那你每写一个都在这里边写,这是这种方式,来我们看一下。当然这个缩小了,这样你看这是首页默认对不对,那关于我们个人中心,你看上面标题跟着变化对吧。
04:06
你知道为什么我们一定要改变标题呢?默认标题是哪个呢?你看我们在呃帕里边,Index里边。你看这里边,这里边儿有一个这样的一个标题的一个,呃,参数对不对,通过在里边插件里边选项,很多人都想是创新当前这个项目的这个标题。对吧,那我们这一个页面,因为只有这一个,通过这一个页面里边的APP我们加载多个的,所以呢,改变的是这个标题,其实对外就感觉是一个是TML,对吧,所以我们通过这个改变,那这样改变呢,维护显示其实不太方便,每一个都需要是一个页面都写一个这个对吧,当然不是不行啊,是可以的。那我们还可以用什么,你看我可以用前置钩子的方式,把我们这个方式呃给做出来。用前置守卫找到这个。就先不缩小了前置首位,那前置首位怎么怎么做,你看啊,它前置首位呢,分为几部分,分为什么?你看有多种机会植入路由导航的过程,它分为全局的,单个路由的,或者是组件级别的,也就是我们可以在全局加前置首位和后置首位,后置钩子也可以在某个路由上去加,那就是这个路由独享的,别的路由用不了,那一个路由有可能加载多个组件,那还可以在单独的某个组件内去加,这样首位方法都一样,写法也差不多,只是名称有的时候不同罢了,对吧?那我们就在全局上加,全局在哪加呢?
05:28
全局在这个地方。你看啊,找到我们的路由配置,这个是不是我们路由对吧,然后导出整个路由全局,那我们这个是路由我们全局的,如果在这加点与before这个全局首位,那。就会到这儿来。所有的都会到这个地方,就是访问之前都这里边,那里边儿需要传一个回调方法,回调方法我们用箭头方法来传,那如果是在。嗯,V3之前的版本里边,它有三个to,有个fromm from,然后呢。
06:06
号problem,然后还有一个nest,有这么三个参数,三个参数那这个就说这个ZNE什么意思呢?就是你如果不加这个前置首位,或者不写这个参数,当然我们新版里边这个是把这个参数给去掉了。那这个会干嘛呢?它就会停住,也就是不掉N这个路由,它就不会往前走,因为前置首位嘛,还没跳转过去呢,对不对,跳转之前执行的。那这个参数呢,是从哪跳转,这个呢,是跳转到哪,你想跳转到哪里,从哪跳转跳转哪里,这两个参数来啊一会再说,那先说这个,这个呢现在是可选的。那如果我不调用它也是一个方法啊,如果不调那方法,那页面这个路由就不会往下跳转,不会往下跳转。你比如说呃,我们现在。不加这个,不加这个参数。你看我们点击哪一个都没有效果,都没有效果,那如果我们加上这个nest。
07:05
加上这个,那现在你看它就相当于放行,就跟我们拦截器里边每天也肯那个一样,你看现在放行。为我们为路径就可以了,那如果这里边我们还可以什么指定一个什么指定一个呃路径对吧,指定一个路径,比如说。我们导航的噪音。假如说我们有个烙印,那我们所有的。啊,当然这块没有这个唠音这个路径啊,没有匹配找到你比如说呃,A。我自己下。这今天开跳转用他一直这块转啊。先把这个去掉,就类似于什么呢?当然这里边得判断根据什么情况,我们去指定的,根据什么情况去制定的,就关掉,再开一下,有点那个,因为指定那路径访问那个在指定每次都跳转,他来一个什么,来个相当于死循环这样的一个方式啊。
08:04
那新版里边就不加这个了,不加那把它去掉了,那加了一个什么呢。什么都不加,就两个参数,这个是从哪块,就是这是从哪来的,这块要跳转到哪去,那比如说我这里边啊,那假如说想拦截怎么拦截的,不想它跳过去每天加。就可以,这三里边它也一样,不能跳转过去了,现在我们刷新一样,你看。不能跳转,不能跳转,不能跳转对吧,那如果想跳转,你不写返回值或者是返回出。他就给我们往下可以跳转。所以呢,可以拦截住,那可以拦截住,我们就在这里边可以写一些东西,对不对,根据我们的判断,然后去拦截,还让它继续执行等等,或者是跳转到其他的路由,都可以在这里边去用。就看你是在全局里边写,还是某一个单独里边去写了。那比如说我在这里边改变标题,怎么改变呢?就不用原来那种标题方式,你看啊,我们打一下这个to,这个to呢,代表的是你要到的那个路由。那我们就可以有对吧,获取这个要到路由里边的所有的东西,这个呢是我们怎么呢?呃,从哪块开始要就当前路由要到目标路由,不道我们从哪到哪,也就这里边给大家做了一个呃描述做这块是什么,即将进入的目标,即将进入,因为首页前嘛,还没到那个目标呢,对不对,即将进入的目标路由对象指的是这个路由对象,当前的路由对象,这个呢,当一成了正要离开的路由。
09:22
因为你从点击。那我从关于我们,我一点击,比如说在关于我们里边,我点击个人中心,那么from就是关于我们对吧,我点击个人中心,点击的时候即将到的就是什么个人中心对吧,是这样的。那在这里边我们就可以,因为它是路由对象嘛,路由对象里边就相当于我们前面说过的ROE对吧,只不过代表的是呃,即将离开的和即将到达的对吧。代表的路径的pass是不一样的,你比如说我们这里边铺点,嗯F全名啊,路径全称点LG打印一下,这是铺点打印的啊,然后我们在from打印一下,因为它代表当前路由嘛,当前路由的路径点。
10:10
你看啊,我们现在在控制台里边F12,我们看一下。比如说我从关点关于我们,你看现在点关于我们,我们现在清楚,现在在关于我们里边,我现在点个人中心。你看是不是user是到达目标的,即将到达目标的这个,那我是不是从关于我们离开的,所以这是之前的,这是之后的,所以它代表这两个路由对象,那代表路由就能获取当前路由的什么pass啊,这些东西都可以获取到,也可以获取到一些其他参数嘛。那took from,那再有那有说那在这里边改标题怎么改呢?比如说。在每一个路由里边,你都可以设置一个原数据Meta。这个原数据。当然是一个,嗯,接S的格式,MTT包里边我们做的时候是不是有MT啊,这不都是原数据嘛,对吧,最原始的数据,那你看我们最原始数据我们在这里边,每一个里边我们在这里都可以上,比如说来一个标题这里边。
11:06
嗯,这是根对吧,那我们就是一行一吧,随便随便举个例子,然后我们这个里边。里边我们一行。二。给你看一下变化啊,然后在嗯这个里面,关于我们是一行三。然后。这个里面。呃,用户里面我们这块再加一个。你好死。娘子。当然了,你这里边儿每一个子路由,假如说你需要的话,这里边都可以去加子路由,你比如说咱们呃,配置这里边。在这块子都有里边这块一行五。都可以去加这个,那我们怎么获取到呢?你看我们就可以通过这块。To点什么?这里边儿有一个Meta。
12:02
通过它获取到这里边的这个是对象,对象里边T开头,当然你可以打印这个图看一下啊,有的时候它你看我们这块打印一下扣点LG。你看每一个我们点关于我们,你看这里边儿啊。有这些里边有全全路径对吧,路径是不是有这个,然后呢往上。你看这里边还有什么?呃,那没有定义参数pass查询,嗯,你看这里边在这里,这里边你看有MK有标题看到了吗?在这块,所以这里边是一个对象,有title,你就可以把它获取到,然后这里边。嗯,这里边儿现在没有。那这里边儿你看也有一个对吧,名字也有一个这个。对吧,一片标题等等都是可以的啊,你通过哪个获取都可以分情况。那我们这块就可以是document点对吧,Title等于two里边的Meta a点标题对吧,然后我们看一下点击关于我们个人中心,你看它上面闪一下就过来了,因为我们抬头这块在多个地方设置过,因为我们在呃,关于页面里边我们有过一个这样的一个方法对吧,然后呢,在。
13:15
Home里边我们有这样的方法。因为前置手续在他那还没到这个密之前,先执行那个,执行完之后再执行它,所以呢,他会把这个名称给那个给我们覆盖掉,你就删两个吧,你看一下效果就可以。打开我们的那个页面,现在首页加行一了,对不对,关于我们123个人中心啊,个人中心124又转回到这个,咱们删对吧,删掉就可以了,所以呢,通过这里边我们可以查到这个人的这个原因。那你想知道这个后置钩子怎么调用的话。比如说我们在这里边儿怎么调用的话,那我们。这是前置的,没跳转之前,所以我们可以可以让它跳转到其他地方,那后置钩子我们怎么做呢?就是假如也柱是一个全局的。
14:00
啊,After这个那里边儿呢,也是有两个。那想象一下这两个参数。是什么意思?这两个词是什么意思?那我们直接吐点啊,Pass。形成了rog。然后再打印一下s loe,点呃,这个lo。5959。你打一下这个,你看一下一个是to的,那我们这块加上一个to。连接一个,这会我们连接。从哪来到哪去,对吧。它也是代表这两个对象,所以你在这里边去处理一些事情也都可以了,那现在我们刷新一下,嗯,这里边来一下首页。你看吐十根对吧,关于我们。这块没有定义。这块不用这写错了。
15:00
所以这块有大错,你看我现在先点就是关于我们这块,现在是在关于我们对吧,那我们现在点个人中心或者点。点个人中心。你看现在就是从关于我们的个人中心,那关于我们就是flow对吧,那到的点的个人中心到个人心目标就是用户个人中心,当然这已经跳转过来的,后的就已经过来了,而我们在这块呢,是已经没过来的,在点击之前对不对,那你可以有权限制它不跳转,但这块呢,你就限制不了,所以这里边呢,在老版本里边也没有nice,它就两个参数。对吧,但它这里边儿有一个第三个参数。就是失败成功失败那种。如果失败了怎么怎么样,也有一个第三个反装,比如跳转失败的时候,比如说我们给他统一到一个失败的页面,说你返回的页面不见了,或者什么对不对,不用出现默认的那个404,所以呢,我们可以所有的请求路由失败的时候,我们都可以用第三个参数去判断,对吧,去处理就可以了啊。所以那是后置钩子,就是已经请求完了,你请求到我们就失败了嘛,失败我们可以处理,那这是全局的导航守卫,那不是全局导守卫呢,如果我们需要对吧,只针对比如说。
16:06
关于我们这个里边。让它有独享的前置和后置的,那么就在这里边去定义,所以这个呢,我就给大家一个是了,功能都是一样的啊,功能都是一样的,那我们找一下手册里边,在手册里边你看他这种就类似于你看页面没找到对吧,提示了这种对吧。那我们找一下,你看在高级里面第一个就是什么导航首位。榜首位。然后呢,嗯。后边啊,没什么了,看这吧。这里边介绍,当然这个咱们是用这个翻译的啊,是用这个翻译的,所以呢翻译的不太好,因为现在咱们最新的我还没找到什么像样的那个中文的,所以呢,咱们就先用这个翻译的来对付看吧。你看在全局使用的时候,使用这种方to from返回真假值对吧,To是干嘛的干嘛的,我给你做实验了,你可以打印一下这路径,你就看出来了,也可以异步的处理,加上这个就异步处理,不是说非得执行到这就可以了,他根据情况对不对异步的去处理这个。
17:02
然后呢,有可选的第三个参数,为什么是可选的第三个参数呢,你看。呃,在早期的版本中对吧,可以使用第三个三对吧,在新版本把它进行删除了,就比如说处理登录的问题。啊,那next内容写错了,就用对象名字去登录就行了,你看如果在这个名字里边不是登录的里边,假如说我们有一个名字不是登录的对吧,那么或者是呃,认证不通过的,那么就怎么着都让他上登录这个页面是通过这个去做的。这个全球手指的是全局手呀。平均首位对吧,那那后边的钩子对吧,就是后置的一个钩子,后置全局的一个首位,有这么两个参数对吧?当然还有一个什么,也可以将导航失败反应为第三个参数,你看有一个第三份,如果失败我们怎么怎么处理对吧。我买进去。放放行啊,或者是错软的都可以啊。然后还有可以怎么着按路线手,因为它在翻译的问题啊,咱们这什么路由读享的所谓也就是这个写法跟这个差是差不多的,对吧,只不过在路由注册表里边写的,比如说这个路由下面写这个前置的,那它处理的写法是一样的,只要在这写就行,对吧,那他处理的就是什么,就是只有访问这个路由的时候。
18:18
才是有效的,也就首位单独的这个路由。这是路由独享的一个方式,那组件内的呢,组件内有这三个名称不一样而已啊,那一看那名称都都可以知道,在组件里边写跟我们date都是在同一级的,跟生命周期类似于都在同一级的,你看。有这么几个名称,Before,路由输入的时候,这里面都有翻译啊,你们可以呃,好好去看一下,它这里边都有说明对不对。进入的时候,更新的时候,离开的时候,这三个点区域调用的,那在这个组件里边68也不多,你看这to from你都可以分别打印下,全的都是路由对象。嗯,大概就是这么多。嗯。啊,一般的咱们用全局的比较弱,极个别情况下你要知道嗯,在我们某个单独路由里边可以使用,那在呃组件里边也可以使用。
19:07
那这块咱们就给他演,咱们给你演示了一个在全局,那放在里边也是一样,只不过在组件里边名称不同而已啊。好,那我们就了解这么多啊,导航首位啊,谢谢大家。
我来说两句