00:00
大家好,我是学习园地的特约讲师高永峰,上节课我们学了命名视图,也就是在我们的主页上,我们加了多个这样的视图的,嗯,路由里边给我们自带的这样的组件,那我们在切换路由的时候,切换路由的时候,它都需要加载多个对应多个模,多个组件,然后来显示,这样呢很不方便,需求量不多,所以呢是常见,那我们可不可以有另一种方法解决呢?那有的时候我们也需要这样的需求,就比如说。我们点开这个,你看在我们以前做的这样的商城里面,这样的是大的导航,然后下边主页面切换对吧,当我们切换到关于我们或者个人中心的时候,个人中心的时候,这样的话有一个相当于子导航。知道啊,当然我们这是后后端渲染的对吧,那路径呢,没有改变,如果正常改变的话,比如用户中心user订单,我们就order,对吧,然后这里边显示订单页面,那比如说个人设置setting。就到个人设置页面,所以呢,这种嵌套路由或者叫做子路由是我们使用形式比较常见的,所以呢,咱们就来做一下这节课,咱们就学习一下子路由或者叫做嵌套路由,那我把原来这个程序嗯改一下。
01:06
我已经给你备份一下,上节课写的代码都备份了一下。备份的一,这个备份的一,所以能直接改这个模板页面就行,那我们还是留一个,其他的不留。把这个拿回来,然后咱们学习左右,当然这个累咱们也不需要了。你看回来,这样的话个人页面就可以了,上面的咱们留两个切换的就行,然后嗯,这个我们也不需要,省得我们切换的时候看不到效果,它总弹出页面,把它去掉,然后在入口文件里边,也就是这个文件里边,那么我们把这个再改回去。因为在这里边加载了多个模板,加个负数的形成变加,那我们把这个去掉,这里边换成一个换成A。然后我们在,嗯,好像还有一个地方,这块也是咱们换成一个,然后把它改成o home。好,咱们看一下切换。
02:00
这块关于我们个人中心,个人中心就可以了,现在呢,咱们需要在个人中心user这块再加上嵌套路由,比如说显示这setting对吧,那我们就转到S这块order,那我们就转到订单这块,是这样。是在个人中心这个视图里边再嵌套一层视图模板,是这样,是子路由,所以路径我们得需要多层,那多层路径我们怎么定义呢?我们先把这块先定义完,那多层路径我们如果需要,我们能不能在这块再定义一个路由映射规则,再写个pass,然后写个这样。写个user下边的,然后呢,Or DR对吧,这样显然是不太合适的,不写多层,那如果子路由呢,是在这个加载的这个模板里边去用子路由,那我们直接在这个位置上,咱这会再报上分开啊,写上children是不是孩子的意思对不对?它是一个速度。这里边我们再写上规则,再写个pass自路由,然后这里的pass,我们是连接这个pass之后呢,如果我在这块写上这个斜杠,比如说订单,个人中心的订单不太合适,因为这么写的话,当我们去跳转路由的话,会从刚开始,也就是整个页面会把user这块给我们去掉。
03:11
但出错没关系,因为这块还没保存,对吧,它会变成这样,所以我们想象的这样,这个use下边的order,那我们这块前面是不能加这个,不能加这个。那要是写全称行不行,User下边的这个也没那必要。你想如果这么写的话,如果需要换掉的话,是不是所有资料的就全换掉,像咱们刚才看那个商城对吧,下边有那么多项呢,那我们都一一换掉吗?也不太可能,所以这里边斜杠也不要加直接这样,这样的话它就会给我们拼接成这样的路由什么呢。斜杠U下面,当然前面还有其他的域名啊,这pass定拼接成order,所以直接这么写就可以了。那当访问这个pass路径的时候,那么是不是也得加载哪个模板呢?对应的模板,那我们整个访问这个用户的时候是加载这个模板,对吧?在这个模板里边,我们是不是还得加载其他的指定的这个路径下载模板呢?所以我们在这块。com你看再加一层模板。
04:08
再加一层模板,那模板名是什么呢?那就看我们自己定义了,那在下边再加一层模板,也就是相当于我们这个页面。这个页面下边,你看我们在点击的时候,在点击的时候,那它是您要把它看成是页面级的还是组件级的,如果就是一个小组件,对吧,我们把它声明在哪呢?声明在这个目录下边,如果你把它也看成是一个单独的页面那样,那我们一般路由都只要路由跳转都把它看成是单独的一个页面,对不对,那我们就把组件声明到这个下边,当然声命在这下边行不行啊,也可以没关系啊,那我就声明在这个下边,把它单独看成是一个页面。原理我就不多说了。在这里边,比如说我的订单me,呃,或者叫卖我的订单or DR定义这个组件,那这里边呢,Div我们随便写一个,呃,U下边的Li,另一个这个我就随便写成一行一了,然后。多几个对吧,然后呢,在下边这块其他样式我不写了,就到时候显示这个模板就行了,然后呢,我们再来一个个人设置。
05:07
你咱们需要两个切换的时候,你需要多个模板切换个人设置,那我们就是我的设置set t名称,你自己随便定义u Li下边的Li,然后我们一行二。多行。就可以了。那这两个模板我们都需要在这里边配置规则,在这个组文件里面去配置规则,那这里边显示模板,那模板我们想用这种懒加载的方式引入的话,那我们把所有的声明都放在这块,有两个,一个是我的。呃,不是我的组件,我的订单or。声明对名称一样,然后跟上边这个是一样的,声明一个箭头函数,箭头函数里边我们用是什么呢?这块V6下边的。我的订单,然后再来一个我的个人设置seting,然后这块我们换成个人设置斜杠我的设置就可以了,那我们这块通过这种导入的电缆加载,这也是咱们刚讲过的,然后在这块就可以加载我的订单这个模板。
06:10
我的订单comp没有错啊,怎么变颜色了啊,这里边放多个组件,我们得放在哪啊,它是阶层格式的,每一个得单独放,放在这里边。当然会出错,那我们现在假如再加一个,那我们还是一个跟上面的上层路由规则一样,上层能写上这里也写什么,比如说你加个名字啊,什么都可以,那订单set t,假如说我们访问这个路由,当然这个路由我们访问的时候,它也是子路由,上边会给我们加什么,加上斜杠user下边的这个路径set t,所以呢,我们写这个路径就可以,它是这个下边嵌套的这个子路径,然后我们这里边一样com组件加上我的,嗯,什么呢,这里边。呃,个人中心式就可以了,这样的话,我们请求这个路径的时候,它就会。在这个模板下边去找对吧,然后呢,加在这个模板,那请求这个路径下,也会在这个模板这个组件下边去找这个,那我们现在定义哪呢?你看我们本身这个是不动的。
07:10
本身这个是不动的,你看个人中心这个页面现在还没有变化,那我们在个人中心里边再访问子层菜单的时候就用到这个了,那我们需要把这个定义到个人中心里面。在这块个人中心。嗯,第二后两行吧,然后我们这里边比如说定义成两部分,一部分是菜单div。Div,我们这里边来一个plus,用一个MM应用编译成这个菜单部分,然后div,我们再来一部分声明内容部分,CLAS等于比如说con。这个放在左侧,这个放在主体内容放在右侧,那我们在这里边显示这两个,一个是呃,我们的M电U,比如说宽度25%啊,你随便给样啥或者30%吧都行,这无所谓了,然后高度300。
08:03
像素背景颜色,我们随便给一个颜色,随便给个颜色,然后让它float多float左放在这,你看这块现在在个人中心就出现了一个这个对吧,然后我们在gen tent这块宽度那那块是25%了,30%了,那我这就70%高度我们也是同样300个像素背景颜色,我们就给个蓝色,你让他看一下蓝色对不对,宽度70%。嗯,没问题啊float啊藏在里边了,对,没加lo用就过来对不对,然后这个颜色我们去掉,或者是加一个白色的吧,这样的话你就知道菜单这块有颜色,其他就没有颜色,这样就可以了。然后我们在这个里边,你看我把想显示的内容模板,也就是我们在访问这个pass的时候,对吧,它找这个模板,这个模板在哪显示呢?那我们显示模板的地方,视图的地方,我们就用RO tr root里边VW放在这里边显示就行了,那我们访问什么路径的时候在这里边显示,那这里边加链接加接,当然我们用它,嗯,路由里边给我们提供的默认的root RO tr里边的link在完成,它给我们渲染成黑标签对不对,当然我们外层可以放成什么,也可以用U这里边的LY对吧?在这里边写上Lu,呃,Link去去设置,这里边一个是我的订单。
09:25
然后还有一个是什么,嗯,个人设置加这两个就可以了,然后这里边呢,加上这两个的ul了,我们刷新一下,看一下怎么显示。嗯,这块有一个有一个错误。看一下什么错误使用an pass没有只能pass没有定义对不对,因为这里边我们一定要定义个pass对吧,To等于什么,然后这块我们也一定要做一个pass对吧,这样咱还没写完的话,那。第一个pass,这里边写的路径该怎么写,我们是写全称吗?User下边的,你看一点击到user下边,User下边的或者是我们这里边,这里边就不能拼接了,虽然最下边一点击的时候一定是全路径user下边的,然后or DR这么多才可以,那这个路径呢,也是全路径user下边的set t这样才行。
10:16
哎,你的手进面你看就出来了,我的订单个人设置对不对,现在我点击我的订单的时候,你看点击的时候是不是转到这个路径,转到这个路径的时候,是不是就找我们这里边儿的。对吧,就能匹配到这个路径下的这个路径,然后加载的组件是这个,这个组件在哪显示,是不是就会在这显示,所以现在点我的订单,你看点行一,然后点个人设置,然后二然号一,然后二。对吧,第二这样的话是不是就切换了,当然我们切换到其他的地方,个人中心再回来。你看切换到其他的地方都是没问题的,这块只是在个人中心里边又分成这部分,咱模拟的就是这个商城,咱们去写的这样的一个方式吗?这就是子路和嵌套的,但是你看我切换到关于我们再回到个人中心,本来我这块已经点击了对不对,那么一进来个人中心默认,也就是我们一切换到个人中心不写路径的时候,默认就让它显示个人设置。
11:10
或者是我用来行不行啊,可以你想做什么都行,怎么办呢?在这里边你看我们只加了一个什么,这个路径的时候,下边的这个路径的时候跑这来,那如果我想让它默认显示个人设置那一行二对吧,那我们在这块写上pass是空,如果是空的话,就什么就会匹配到。这个下边就会匹配到什么呢?就会直接匹配到这个地方,对吧,因为空了对吧,所以呢,直接就会匹配到这个地方,匹配到地方加载什么模板呢?你想要这两个哪个是作为默认的,那你这块就加载成模板。所以现在你看啊,我现在个人中心一点击个人中心再回来再点击个人中心,你看空的是默认加载也是一行二在我的订单切换就行了,如果你想默认是我的订单进来就是我的订单,那你就把这个放到。这个位置。就可以了,那现在你看我们从个人中心这个地方再回到个人中心,默认就是这个,呃,我的订单,但这会显示样式没有,对不对,因为咱们在组件,嗯,这个里面。
12:10
这里边用的时候呢,是不是可以自定义加上这个类啊,对吧,就算不加的话,它默认是不是也是给我们用上了哪个类啊,用上了这个类啊,对吧,那我们就把这个类拿过来。这拿回了,因为它外层有一个div,我们没有用到这个外层div,你看外层的div是这个ID div对不对,那咱们没加,你可以随便去做嘛,那如果你现在想在这个里边,你看想要它有默认I对不对,激活的就是正在访问的,那我们就加上这地方了,那它上头没有div,那就把这去掉,就写个A标签是这个这个就行了。蓝色有点不明显,那我们这块来一个re,就这一个。来,我们点订单关设置,订单关设置。就可以了,看了。订单和个是默认,他会给我们加这个类对吧,个人中心关于这点个人中心对吧,当然空的这块没匹配的路径,他不知道找哪个订单,所以他没加这个类,那你可以默认,既然那块写默认加这个类了,那你这块也可以默认怎么的。
13:11
默认就让我们加上这个我的订单默认这个位对吧,那这块加上一个。嗯。手动写上了个人中心这个再回到个人中心,你看默认加了个人设置对吧,但这个类没有切换,你再做一个想办法做一个替换就行了。默认加上这个加个不行的值对不对,访问的存在就行了,可以随便去设置,这都所谓。因为空的你可用那个去判断,然后加什么类对吧,咱们上咱们说过那种方式。啊,这就是子路由和嵌套路由对吧?嵌套路由当然咱们这种方式你可以用选项卡的方式在这做,但是用选项卡的方式,听咱们前面的课程讲路由之前,让大家认识路由的时候说过的,对吧,但是那种的就不会在路径上体现,Pass上体现,你也能做到这种效果,但是不能在这里体现。
14:00
对吧,那不能在这体现的就不利于搜索引擎,那这块如果体现改变了,就相当于给别人用,给搜索引擎的感觉,或者给用户感觉,你相当于在切换页面。其实呢,我们还是这样的一个模板。好,谢谢大家,这节课我们讲到。
我来说两句