00:00
大家好,我是学习园地的特约讲师高若峰,上节课我们学习了延迟加载和路由模式的一个切换,那这个呢,作为咱们了解内容,基本上固定配置就行了,不需要咱们在开发的时候经常改动,那这节课咱们再学习一下命名视图和自定义导航,这什么意思呢?比如说我们在做程序的时候,经常用到这样的路由,这样的一个导航,对吧?我们使用是固定的给我们一个路由,里边给我们提供好的组件。Root link这个组件呢,我们是,呃,一般情况下我们设置导航切换这个URL的时候,我们都是用这个不需要怎么去改变,但是有的时候呢,特殊情况需要进行改变,对吧。那我们就需要对它进行一些改造。那都改到什么东西呢?因为它默认渲染出来的是A标签,你刷新一下,你看一下,嗯,看这个元素元素默认这里边渲染出来的。给我们渲染出都是A标签,它相当于a hif这个多对吧,都是A标签,然后呢,我们当前选中哪一个,把它往上拽一拽啊。
01:04
当前选中哪一个,你看它就给我们加上了这个类,对吧?这个类相当于是我们活动状态,你看首页活动状态这个,那如果我想改变它的外观的话,那我们已经改变过了,对不对,就是这个,那我们能不能换的不叫这个类名呢?当然你就叫这个类名,直接样就可以了,对不对,直接写样就行了,对,不用去改动,那如果我想换一个这个类,那怎么办呢?那这里边我们可以直接用A啊,忘记那个了,那就不换了。啊,这个。嗯,提示了对吧,在这里边比如写变成嗯,ACTV我们自己构的一位,你看啊,这里边我们加上这个,然后我们把它加上点A,我们自己做一个呃,颜色cover ID红色的,你看这样的话,我们只有首页上加这个,这个现在活弄的时候看这个看加上这个了,但是呢,呃,它的优先级没有上面的高,但是这个类是加上了,看到了吗。
02:02
我来加这个类机没有那高,所以他没有变成红色,那我们加上这个。改变一下优先级,你看它就变成红色了,那我们其他的是蓝色,这个是红色的,换一个类而已啊,换一个类当然没有必要这么去做,那你如果想改变其他的样式,那我们这里边都可以加自己定义的类,比如说这边写一个,呃,这里边写一个,比如说。背景吧,就叫BG。Class加一个背景1G。你可以这么去加,Class等于笔记。然后我们在这里边,你可以对它的外观进行修改,点BG加上,假如说bab景颜色,我们是换一个颜色,换成这个加上背景,你看每一个都加上背景。所以呢,在这个上面你可以去添加对吧,它就是一个A标签,那外层呢,你可以在Li Li标签什么的,把它放在Li标签里边都可以,对吧?所以呢,你就把它当成A标签来用就行了,它就相当于给我们写好一个组件,把A标签给我们改造一下,改造成我们就是可以直接导航了就行了,那他说。
03:08
我不用这个A标签,我换成别的标签行不行啊,如果在V2里边,V2里边那直接使用pag这块,我指定什么标签名,比如说我指定让它变成Li标签或者是Bo标签,那么直接就变了,但是在我们这里边,你看没有没有作用,对吧?所以呢,在V3里边,它把这个标签给我们去掉了,那我们能不能自定义标签去做呢?可不可以自定义标签呢?也可以,但他给我们这个比较麻烦,用的是插槽的方式,我们找一下这个手册。你把它看吧,你看我们在生态里边找到路由。他这里面没重点介绍,然后呢,我们找到最下边。呃,是从V2迁移到V3的时候,它这里边儿有一个迁移,告诉跟我们说明白了一个什么一个标签啊。你找一下。冰。你这个。
04:00
你看通过插槽的方式,默认有一个这个插槽对吧,指定一个居民插槽把我们放上来,然后呢,里边插槽里边你放上自己任何一个标签都可以了,然后呢,一样跟他这个状态,你比如说换成磁盘标签,那我把这个拿过来,居民插槽它换成了这样方式,把这种方式替换用这种方式,那我们粘过来看一下可不可以,我就在这个下边,我就再放一个书写,然后我们拿过来,你比如说这个插槽里边,你这个世界什么都给你保留,对吧,你为句名插槽叫这个名,你不能随便起别的名,比如说Bo to,那我们叫八。改成一个八来,我们看一下。在这个里面你看就变成了一个button对吧,关于我们点击到这里边儿来button。这是可以的。所以呢,这种方式用插槽的方式,你可以拿过来,然后呢,其他的属性给你保留就行了,其他的都不动,那我们能不能用其他的方式,对吧?这种改名称比较麻烦,当然呢,咱们说了,一般情况下这个名称是不用修改的,我们顶多修修改样式,把它放到别的标签里边,把它就当成一个A标签用不就可以了吗?对吧?所以有需要呃,切换路径的地方,我们都这么用,To,这个是最方便的,那如果我们非要自己做的话,怎么办呢?也可以你比如说Bo done,我给大家说一种方法啊,但不建议这么做,比如说换成按钮了,这是我自己,咱们自己换的一个按钮,前面有那个出现,我们分割一下。
05:19
首先分割一下,然后按钮这里边,比如说个人中心,个人中心那加上按钮,你如何让它去导航呢?你看这块个人中心加上了,我们把这个还是最小化了,你看个人中心现在点是没有效果,对不对?现在有导航,那我们怎么办呢?我们这里边用上它的全局属性,因为我们在这里边是不是把路由已经相当于使用这个路由加到这个,呃,我们的实力里边了,对吧,加到我们这个V由实力里边了,所以呢,就相当于在V由实力里边,假如我们有一个这个V实例啊,当然不是这么创建的啊,假如有这个实例,那这实例里边加了一些属性,属性你看就有这个对吧,有RO tr有这个。
06:00
那加到这个实例里边了,它有个全局属性,所以呢,我们可以直接用全局属性来指定我们的一些参数。你看怎么指定啊,你比如说我们按钮是不是需要点击啊,Click点击的时候全view里边的全局属性我们直接导入服,你比如说EMIT啊,这些东西咱们都用过对不对?全局属性在这块有一个root。这个路由我们可以通过它里边类似于我们history那种,比如说我们这里边群体属性里边有什么呢?有。够。假如我们这加热要返回,返回,那返回多少呢?返回一层。那我这现在变成返回了,我现在点首页,再点关于我们,那我先点返回就回到首页对吧,那我点个人中心,再点关于我们,我再点返回是不是就到个人中心,所以呢,这个是代表我们的这个路由器,就代表我们的路由,那所有的这个路径,它相当于都缓存到我们路由里面,历史嘛,咱们用ter的模式对不对,那么我们用go就可以回到第几层,你可以GO1GO2都可以,对吧,都是可以了。
07:06
那我们也可以往路由里边加路径。这散油在这块我再粘贴一份。前面你看。我归步了,那这里边有什么呢?里边有push push相当于路由器,相当于一个站,我往里边加路径就行了,那我这块比如说叫个人中心,个人中心,那我这里边如果直接加一个字符串的,那就是直接在往里边加一个路径,它有多个参数,和我们在地址栏里边history,你看这样是一个道理,它里边也有一个push占到这个对吧?往这个历史里边去加一些路径也是可以的,那我们访问过的也是直接加到里面去了。是一个道理,所以呢,我们这样的话,我们一点个人中心就在我们的路由里边加了这个路径,也就意味着相当于我们跳转到这个路径是一样的。来来,我们看一下。嗯,刷新一下这里边个人中心你看。
08:00
诶,我们家的不是这是跟了对不对,分中心优啊。个人中心支付到个人中心这来了是一样的,然后刚才这个链接我们还少说一个,比如说这里边每一个首页你可以加上它盖的,因为它是A标签嘛,现在下划线,下划线BL。这个弹出你看元素的时候,我们点首页,你看我们弹出了一个新的一个窗口,对吧,都是可以的,相当于在A标签里边给我们加了一个,这个是可以的,那这个呢,咱不用弹出的就不能做了,对不对,但是呢,这是咱们自己做的一个元素,所以你加什么样式啊都可以对吧?上面只不过是他给我们做好的组件,这是我们自己做的。这个,那我们这有没有什么激活状态呢。激活状态,也就是你看我们现在点的是这个个人中心,你看点这个个人中心,或者点这个个人中心,或者点首页,对吧,它都有一个什么。都有一个,呃,默认的一个激活按这个状态,那这会我怎么做这个状态呢?你看我们这是路由器对不对,那它里边有两个全局属性,一个是路由器,这个就是啊root代表我们整个这个路由对象在路由E里面是全局的,所以直接当服用就行了,如果我们在方法里用。
09:08
如果我们在方法里用,假如说我们这块有一个square方法里边啊,你比如说我们在这里面,假如说我们在这里边met ods。在这里边,假如说我们这块有个ABB的方法想去用的话,那使用什么?使用是Z点高RO。里边push是这么用啊,如果在方法里面用,我们是这么用,前面加this,记不记得咱们date里边数据,咱们用的时候都是用this,对不对,那也是全局的嘛,然后呢,不是date里边的,那我们直接在模板里面直接用这个省this就可以了,是这样的一个关系。所以我们在。嗯,再回来在这里边,如果我们想使用,我这块会加一个属性啊,你看还有一个全局属性,这块ROE记得没有R,没有R,那这个呢,是当前正在访问的路由,通过这里边可以获取的参数,可以获取路径里边有个pass路径,就是记着一个带R的,一个不带R的路由,这块有两个全局属性,带R的和带R的,这个是代表整个大的路由器的一个对象实体,这个呢是代表当前访问路由,它俩是这个区别。
10:14
所以你看当你访问这个那点这个的时候,个人中心的时候是user对吧,点首页的时候就是跟。你看到这块后边的一个变化了点返回。也就这块的路径是什么,这块就能获取的什么路径,所以既然只要这样的路径是什么,就获取什么路径,所以我们这块是不是就可以做一个啊,绑定一个属性plus等于。我们记得刚写了一个这个类对不对,刚写了一个这个类就是激活颜色现在是变成红色的,对吧,那我们哪个是激活的,我这里边冒号,当我们路由里边的Lu,当前路由里边的pass,如果等于我们这个是user,等于这个pass的时候,是是我们就。可以让它变用到这个类了,对吧,用这个类是真他就用的这个类,比个人中心点击看标签是激活的对吧,不是激活的激活的。
11:06
就可以了,所以呢,一样能做到上边这个作用。当然这还有一些其他的改变,你再去试一下吧,找手上,当然我们这些就够我用了,这是我们在写页面的时候需要跳转的,其他页面可以,如果直接默认就用A链接,那么你别写别的标签,就写这种标签,所有的A链接标签都写这种,他就可以给我们做路由跳转。对吧,如果你是跳转到外站不是本站的,那么你还是用A标签就完了,对吧?那如果你想是图片标签去触发路由,或者是按钮触发路由,或者按标签触发路由,那么你就可以用这种方式做,或者是呃,这种插槽的方式去做都可以。那咱们这节课除了是说一下这个怎么去改变,那么还有一个命名视图,什么叫命名视图呢?也就是我们自定义给我们两个的组件,除了有它之外,还有这个对吧,那就类似于这个呢,有一种叫画中画的效果,也就是我们在页面不仅用这一个,当然这是单标签啊,你们也可以把它做成什么多标签,你看比如说有三个。
12:06
都可以,也就是在一个页面,如果我们用那个I frame,不知道你去HTML学没学过这个对不对,类似于画中画,就相当于我们这边是导航对吧,这边切换也类似于我们像这样。你比如说像这个这边假如说是一个导航,是一个页面,你看对吧,然后这边还是一个页面,那你点击对吧,名字识图就这你看。名字制度也翻译过来,就是我们这个名字是读是这样的,那么在这里边,也就是在一个页面里边可以有多个加载的,当然了,如果你不起名字,就像我们插槽一样,使用那个模板插槽lo一样,那我三个如果都不写,我就现在就复制成三个没起名字,那么我们页面默认显示的应该是哪一个呢?你看你看这三个里边都显示对吧,这是个人中心,这是关于我们对吧。都是不量,那如果我这块起一个名字,起个name。
13:00
当我们这里边每一个都可以加个样式,我们加一个,比如说的样式,我加一个等于。To的样式之后我们加一个class等于二一加这个样式,加这个样式,然后我们在这块。嗯,加一个Y,比如说宽度,嗯,25万。25%,高度300像素,然后嗯,宽度300背景颜色,随便给个颜色,给个这个颜色,然后左一个。来,我们看正好出了一个这个对不对,然后我们在two three改成。W。TE,然后这块。它是一样的,这块我们是又一个,然后这块组。嗯,中间这个我给它改成一个背景颜色,比如说。八八对吧,这个宽度呢,改成50%加在一起不是100%的吗。
14:02
你看这样默认你如果不起名字加几个water value,那么我们每一个value为都加载同样的模板。那我们这同样的组件在外,那我们如果起名字,这个名字一定要和组件相同,和组件相同,比如说。我们这我这我们这有home对吧,Home假如我放在中间这块,我放user,然后第三个起个名字,Name起一个我们叫做a a Bo,你看和我们组件是相同名字,同名字的啊。你看这里边现在就剩一个对吧,中间这个50%的这个颜色,因为我默认选择了,你看作为我们个人中心对吧,都是这样。那怎么能让具体的这个对应是加载哪一个,不能说加载同样的一个,对吧,三个都加载同一个,那没有意义对吧,相当于加载三次,那我们要每一个路为对应一个组件,对应一个组件,对应个组件怎么办呢?那因为在一个页面里边有三个地方需要加,所以呢,每一个路径下边都有这三个,所以我们就需要改造一下我们的路由映射表。
15:08
比如说首页这块,那我们既然是三个了,那你直接写一个就不可以了,对不对,那我们怎么办呢?我们在这块加一个comp,加个S冒号,既然是S那是什么?那就是数组格式或者是什么对象格式,对吧,那它是一个,你看一下数组格式,当然这种不怎么常用啊,啊对象格式。啊是对象格式,那我们在这里边加上一个对象,然后呢。我们现在你看默认,假如说我们只有访问根路径的时候才按这个走对不对,如果访问跟路径的时候,它这里边需要有三个位置需要加,那么缺省的加什么呢?Det缺省的,那我们加一个。比如缺少了我们加上后面。后这个模板,后模板我们放在这个缺省的指的就是我们没有起名字的,没有起名字的在这里边没有起名字是第二个呀,那如果我们在这加这个。
16:03
他就会把这个放在这块,点击首页的时候啊,点击首页的时候,这是首页数据对不对,缺省的放在这块,然后我们如果有缺省的,那我们还有把user放进来,那它就会对应那个名字,User放到那里边去,然后。跟顺序没关系啊,他跟那个具体起名字的,你看我这里边反过来,嗯,我现在是左中右。左中右叫user和我把这俩反过来写啊,你看。在啊。这个里面比如说。就写个关于这个,然后呢,User我现在是反过来写的。你看首页的时候,是不是这块还是个人中心,它永远对应的是user,你看最后写在后边了,对吧,这边对应的是关于这是关于页面。他会找跟这个名字对应的句法。所以呢,这里面需要三个页面。那我们在组件这块就引入。引入三个以后是没起名字那个对吧。
17:00
然后放其他的就可以了。那同样,如果其他的页面现在你有他其他的就一个没起名,他肯定有名字的,就像插槽一样,就不往里放了,对不对,他就放在这个位置了,那其他的如果也想加也想改的话,那一样加上那个,当然了,我这只有三个组件,你有其他30个组件也是一样,对不对。那这里边儿我把这两个反过来。把这两个还过来。这个是关于页面,关于我们你看是这样的,这边还是个中心,还是这个跟这是没关系的,这就是我们多是当然这个用的不多,如果你有用的时候,你要知道。页面中并不是说放一个,通常我们是放一个。也不用起名字,就放一个这个标签就可以了,一个组件就可以了,我那我们请求的这个路径的,它会把对应的模板有整个页面几个都加进来,如果你想要画中画这种效加f frame的,那你就可以加勾子,但这样用的几率不多,因为我们组件的话一般不这么写,我们加在一个,假如分成几部分加组件,我们直接在它的里边,子组件里边,也就是我们比如说我们原来那种。
18:05
点击首页,或者点击关于我们在就这一个页面,这一个页面里边,我在用子组件的方式在以几样比这个还方便,所以这个呢就作为大家了解下。所以大家了解啊,不用说那么去进气都可以啊,因为我们在子组件里边一定可以实现跟它一样的效果,对吧,那看上去结构外星体这个呢,你每一个外层页面都得是三层这样的结构,对吧,没得必要。好,谢谢大家。这节课我们就。
我来说两句