00:00
哈喽,各位小伙伴们大家好,那接下来啊,咱们呢,去完成项目路由的分析。那么在分析路由之前啊,这件事儿你得知道。就是前端啊,有所谓的路由,那怎么去更方便的去理解路由呢?你可以把它当做一个KV的一个键值,对。那如果说你有一定的JS基础啊,对象你应该知道是有所谓的K和Y。那么剑值对这个K他是谁呢?你可以理解为就是URL,也就是哎,这个地址栏中的这个路径。那么这就是所谓的K,那value是什么呢?Value就是相应的路由组件。那当然咱们VE的前端的路由得用什么去实现,是不是vuee,哎,Vuee-router。
01:01
所以说咱们呢,在写项目的路由之前啊,咱们呢先稍微分析一下子。当然咱们不可能一口气把整个项目的所有的路由全分析出来,咱们呢,先分析出部分的路由,先把整个项目的这个框架先给它搭起来。那咱们呢,先看一下子已经上线的这个项目啊,咱们呢,先看一下子home,也就是首页,咱们先看一下结构。那首先说咱们得分析呀,咱们的这个项目呢,其实是上。中和下结构的。这要注意,咱们的项目是分为上。中以及底下,哎是上中下结构的这块呢,要注意哎注意。就是咱们的项目啊,是上。中下结构,那怎么去拆分路由呢?那咱们的一点点来你看啊,首先说咱们先盯住咱们的home啊首页。
02:10
这块呢是顶部hier头部啊,有一个商品会的一个logo,以及呢,还有一个用户可以输入搜索的地方,这是顶部。中间部分是什么呢?先记账,比如说有一个三级联动,有一个轮播图,哎,有一个商品会快报,以及还有这个今日推荐。那这些呢,是属于中间部分以及底部,这记住哎,这块有一个二维码对吧,这是上中下三部分。那你看,如果咱们从后跳转到色的时候,那你会发现啊,整个项目的头部是没有变的。对不底部也没有变。而只有谁呢?只有中间部分,中间这一部分区域的内容发生变化。
03:02
所以说这块的路由怎么拆呢?很简单,你看这儿。咱们就先看首页和搜索。首先说home是一个K,它对应的路由组件是谁呢?就是中间这一部分结构。对不?当然底部这咱们先不算,那这个呢,就对应的是home路由组件,那么当你的K发生变化的时候,V你看是不是又是中间部分发生了变化。对不,那所以说咱们呢,稍微写一下子,那也就是说路由组件其实呢,应该有两个,目前为止应该有两个,一个是谁呢?一个是home首页I home。首页的路由组件,以及呢,还有一个是搜索页,就是这个search路由组件。咱们回首你再看一下子,是不是只有上中啊,上下中间的这个中间部分在发生变化。
04:04
这是K以及对应中间的V,这块要注意。对不?而上下这两个,你会发现这两个路由组件都在共用哪两个路由就是home和设置。那咱们呢,可以把这个头部啊和底部给它定义为非路由组件,而这两个路由组件home和设置在共用,共用谁hier和fer。所以说咱们的非路由组件也是非路由组件,咱可以定义两个,比如说头部啊,叫做hier hier不就是头部吗?以及还有谁呢?以及还有这个福。对不?所以说咱们拆路由的时候要注意是把头部哎hi的这儿以及底部这儿给它搞成啥,搞成非路由组件,而只有中间部分的这块的V在发生变化。
05:01
对吧,只有中间部分在发生变化。所以说咱们路由先这么配。对吧,两个路由组件home和设置两个非路由hier和福特。对不当这块老师退出一下登录看这啊,还有你看如果老师点击登录,你看KK会发生变化。以及V也会发生变化,但是你要注意在登陆页当中啊,它也是有头部组件的,这玩意儿是共用的。对,不但是你会发现底下这中间部分它的V是发生变化的,你再看一下,你看这儿,当老师点击登录的时候,K是变化。那么V是哪块变化呢?是这。对吧,因为顶上的头部根本就没有发生变化。对不,那所以说咱们还需要有一个谁,就是log in登录的路由。但是你要注意一件事儿,在登录的这个路由当中,它是有hier的,但是没有。
06:06
对不,在首页当中,它是有这个二维码底部的组件的,但是在登录当中它是没有的,你看嘛,在登录当中只有hier,而没有了二维码没有。所以要注意一件事,就是这个foot,呃,非路由组件,它在哪呢?在首页。首页是有的,在搜索页也是有的。这块要注意,但是在登录页它是没有的。对,不但是写一下,哎,但是在登录页面哎是没有的,那到时候咱们要通过代码去进行控制。其实一个组件有还是没有,那不就是V-if或者是V纲受精显示与隐藏吗?对不?哎,这件事要注意,那以及还有一个,你看这儿,如果老师点击的是免费注册,你看这是K以及hi的,这这也没变。
07:05
对,不但是中间这一部分,这一部分的V发生变化,它是一个什么呢?是注册的一个路由组件,所以你自己再看一下对不对。对不?所以说其实还有一个路由组件,就是谁呢?就是这个注册注册re GI的注册路由。但是也要注意一件事儿。就是注册的这个路路由啊,你要注意它底部也是没有啥的,也是没有福特的。对不,所以这块要注意,对于hier在目前在这四个路由组件当中都有。不管是哄。对吧,你看不管是home还是search,还是登录还是注册,都是有hier。但是要注意一件事,Hier,它只是在首页和搜索页出现了,哎,搜索页。搜索页对,不但是你的foot,它是在首页和搜索页是有的,但是在登录还有谁注册是没有的,哎,注册也是没有的。
08:10
所以说呢,咱们先拆除部分的组件,先把整个项目的结构先给它搭起来。对不,那所以说咱们目前而言是怎么拆分的,是头部与底部是两个非路由组件。而对于像home以及search,这是两个路由组件,以及还有谁呢?登录和注册,当然其他的路由咱们后期再慢慢去搞。所以说这是咱们的一个路由的一个分析。
我来说两句