00:00
哈喽,各位小伙伴们大家好。那接下来啊,咱们要去完成三级联动的路由跳转与传递参数。那咱们呢,先看一下咱们正在开发的这个项目啊。咱们呢,刚刚也分析了。比如说啊,当用户点击一级分类或者是二级分类,或者是三级分类的时候。那需要从home路由跳转到search路由。以及相应的是需要把一级分类或者是二级分类或者是三级分类的产品的名字以及ID。携带给谁呢?携带给色路。对吧,那也就是说需要实现路由的跳转以及传递参数的业务。那咱们呢,也可以回首呢,再看一下的已经完成的这个项目。对吧?那当然色模块是需要拿着这些参数发请求的,获取相关的数据进行展示。
01:05
而且呢,这里面呢,咱们呢,也分析过了。这块呢,咱呢不能使用声明式导航。因为声明式导航会出现那种卡顿的现象。那为什么呢?咱们也说了。由于服务器的数据回来。你循环也去一执行,你可能在那一瞬间。要整出1000多个link。而root-link它是一个组件啊。那么你想想,组建它也是需要创建的,需要拗出来的。所以说是很耗内存的。所以说呢,会出现了咱们最开始看到的那种情况,卡顿现象。而且呢,咱们也说了,最终最完美的解决方案是什么呢?是利用着编程式导航。结合事件的委派去完成这里,那也是最优秀的选择方案。
02:04
但是呢,咱们的回首呢,去看一下这里。咱们呢,还有一些问题是需要去解决的。那首先说咱们采用的是编程式导航,这是毋庸置疑的,这是没问题的。也就是说咱们的利用。事件的委派。结合咱们的这个,呃,叫做编程式导航。那么实现路由的跳转,哎,路由的跳转与传递参数,这是没问题的。但是呢,有几个问题咱们是需要解决的。对不,那么咱们也说一下,就是这种的方案它存在的一些问题。什么问题呢?你自己琢磨琢磨。首先说第一个。你要想明白。这是一个负节点。所有子节点都把事件单击,事件是不是委托给了他的父亲?
03:06
而他的子节点呢,有很多。有div,有H3有A,有DL,有DT,有E。那当咱们点击A的时候,才会进行路由跳转,那也就是说它的值。组呃子节点有很多,你怎么就知道你一定点击的是A标签,对不,就是存在的哪些问题,首先说事件委派。咱们呢是把什么呀,是把全部的子节点有很多,比如说有H3。有DT,有DL,有em等等,是把全部的子节点的事件。哎,委派给谁给负节点。哎,应该是父亲节点。那咱们是点击谁呀,点击A标签的时候。
04:03
那么才会进行路由的跳转,那时候第一个问题就是什么呢?你怎么。哎,怎么能确定点击到一定是A标签呢?那有可能点击的是H3。对不对,这是第一个问题,第二个问题。就算你确定了你点击的这玩意儿它是A标签,那你如何确定你点击的是一级分类的A标签?因为你点击的是一级分类,它要带的参数,特别是看到它的ID,人家叫做CAT1ID。你点击二级分类的A标签,人家带的这个ID叫做CATEGORY2。你点击三级分类的时候,它名字那还叫category,但它的ID叫做3ID。就是存在的另一个问题是什么?存在的另一个问题,存在的另外一个问题。
05:02
什么问题呢?就是即使。你能确定?哎,点击的是A标签。那又如何区分是一级?二级。哎,二级还是三级分类的A标签。对不,所以说这些问题呢,咱们都要一一去解决。那怎么解决呢?咱们得琢磨。这玩意你还真得琢磨,一定要耐住性子去听,一定要琢磨。那这里老师怎么去解决呢?很简单,你看啊,咱们利用什么呢?利用自定义是自定义属性。你看啊,那首先说你点击A标签OK。你要进行路由的跳转以及传参。你是需要把你点击的那个一级分类,二级分类或者是三级分类的名字传递给设置,还有ID。
06:08
你看老师这么做能不能区分开它是不是A,你看我给这个负节点当中A子节点,我给它添加一个自定义属性,比如说叫做date杠,Cat name。那值为什么呢?值为C的cat green name cat cat green name。那一级,咱们的二级分类以及三级分类,我都给它加上这样的一个自定义属性,都叫做date杠,Category内。那当然这里咱们需要改一下,这是C2,那这是C3。那你会发现一件事啊。在所有的子节点当中,老师只是给A子节点才加上了这样的一个叫做date杠、category name这样的一个自定义属性。
07:06
那也就是说,如果你这个子节点当中拥有着自定义属性,它那一定是A标签。你琢磨琢磨,是不是这个道理,而其余的子节点是没有这个自定义属性的。那所以说咱们的第一个问题怎么解决,很简单,第一个问题。哎,第一个问题。就是你怎么能确定点击的是A呢?很简单,那就是说把。子节点当中,子节点当中。谁呢?A比较强。对吧,我加上自定义属性叫做date,杠开great name,而其余的子节点是没有的。对不,那这样你不就区分开了,它是不是A吗?那接下来的问题是,你怎么能拿到你点击的这个节点?
08:05
对吧,以及判断这个节点是不是A呢?很简单,咱们可以六一。那么为什么要用event呢?因为一是事件对象,它可以获取到当前触发这个节点,触发这个事件的这个节点。咱们可以打印一下,你看啊,来看这老师light,一个叫做no的,比如说叫做或者叫element。等于什么呢?等于一的点。Target。你看老师呢,给你打印一下子element ele啊T,当然这咱给它小写吧,大家要写都无所谓。你看啊,咱们瞄一眼,你这样是能获取到当前触发这个事件的子节点,它可能是DL,可能是H3,可能是A。但是他的子眼这么多,我怎么能确定它一定是A呢?很简单,你这个节点。
09:02
带自定义属性date、杠、category name的,它一定是A标签。而且这里面呢,还有个小细活要注意。咱们在写自定义属性的时候,这块用的是什么呢?用的是驼峰的写法。你看嘛,这不拖峰了,内幕这不大写的吗?但你要注意,你在这看到的时候,它是小写。浏览器自动可以变成小写,这要注意。那也就是说咱们呢,可以获取到当前这个触发事件的节点。对吧,比如说获取到。当前触发这个事件的节点,它有可能是什么呢?H3,有可能是A,有可能是DT,有可能是DL。但是咱们需要的是什么?需要带有谁?Date car cat great name这样的节点。因为这样的节点它一定是A标签。对吧,你想想是不是这个道理。
10:02
对吧,那怎么拿到这个节点的自定义属性呢?那这里需要注意一件事。就是节点啊,有一个属性叫做S属性。它可以干什么?可以获取节点的自定义属性与属性值。你看咱可以看一下,比如说老师给你打印一下,你看啊,咱来一个叫element,第2DATA set。注,都是小写,它呢可以获取到当前触发这个事件的节点的自定义属性,你看吧,比如说我点的是A,你看它是不是有cat name这样的一个属性。但是这里要注意一件事啊,自定义属性,它的名字全是小写的,这浏览器自动帮你啊搞定了啊不是驼峰了,这要注意一下,就说你点击的是A标签,它身上才有这个东西。那所以说它是个对象,那对象咱完全可以给他解构出来。
11:04
对不,那你这就可以let一个,谁叫做cat。Great name。那这里面咱们就可以判断了,比如说如果标签的身上。拥有什么呢?拥有category name这样的属性,它一定是A标签。对吧,那一定是A标签。那咱们就可以判断了,说如果你有category name这样的一个属性,那它一定是A标签,你给咱来个123。对不,你看我点击的不是A标签,你看啊,他是不是不弹。他是不是不弹,我点击的只要是A标签是不是才弹。对不就是咱们的第一个问题解决了,就是怎么区分开它是不是A。那接下来还有第二个问题,什么问题?你怎么就知道是一级分类?还是二级分类?还是三级分类的A标签?
12:02
因为不同级别的A标签,它带给设置的这个ID是不一样,名字都一样,都叫name手机,但ID不一样,三级分类是3ID。对不?你一级分类是一,你说你要区分开是一级分类,二级分类还是三级分类的A这玩意咋搞。那这玩意儿其实也可以通过自定义属性去区分,你像咱是通过data杠,Category name去区分它是不是啥,是不是A标签。对不,那你还可以再给他添加相应的自定义属性。比如说你这个标签上带有开。GR1ID的这个自定义属性,那它一定是一级分类的A标签。对吧,那当然这是c1.categoryid。对不,那也就是说只有一级分类的A标签才有这个自定义属性,那二级分类的标签呢,它叫做什么?叫做CATEGORY2,那这也是C2。
13:02
那就说二级分类的A标签才有category a。那以及三级分类它才有category,那这样咱不就区分开它是一级分类,二级分类还是三级分类的ID吗?你琢磨琢磨,是不是这个道理,咱们也就是说通过有没有category name去区分这些节子节点当中它是不是A,以及通过身上有没有1ID、2ID、3ID去区分它是一级、二级、三级分类的ID。对不,那所以说咱们这也可以解构出来,但是要注意咱们这儿写的是驼峰,这是小写的叫做开。ID。还有谁呢?开二和S。那这咱都搞一下2A和3A,那当然你得改一下二。还有谁呢?三?对不?那接下来你在这不就可以判断了吗?就说如果你这个标签上有EID,那一定是一级分类的I,对不?那如果说l if,你有category rad,那一定是二级分类的A,那else,那一定是三级分类的A。
14:10
你琢磨琢磨是不是这个道理,就是通过它去区分是不是A,通过他仨去区分是一级二级还是三级的A级。对不啊,当然你这块你不写else,你写else if也可以。那接下来的问题就是你要进行点击不同的分类的A进行路由跳转,你得整理参数。为啥?你自己琢磨琢磨,咱最后的一行代码是z Dollar router。对吧,点push你往哪是不是得有个对象name叫啥,比如说叫做search。对吧,CH以及你带的参数是通过query参数带过去。名字开great name是谁?对不,有可能是EID,有可能是2ID,它又是什么,是不是这样的一个套路。
15:01
那所以说咱们得整理参数了。那也就是说,当你点击的是A标签的时候,我不管你是一级二级还是三级,你都要带这个产品的名字过去,你做总我管你是一级还是二级还是三级,我是不是都要把name带过去。对不,那所以说咱们呢,要整理什么呢,整理。写下整理,哎,整理。哎,陆游。跳转的这个参数,首先说第一个你往哪跳light一个,比如咱叫做location,等于什,你是不是要往这个name为search这里跳。对不对。但是你别忘记了name这块,你还将来还需要啥?需要一个query,为什么?是不是带的宽参数?那这个宽参数咱们目前没办法区分是一级ID,二级ID还是三级ID,所以咱们让动态去添加,比如说light一个query。那起始值是啥?咱已经知道的是一个,就是名字叫category name。
16:04
那为什么不就是category name,当然这个name是小写的,咱解构出来这个纸。但是你要注意这个query参数,它除了有name之外,还要知道是EID还是2ID还是CIID,那就是咱不区分开了吗?那咱动态添加不就行了吗?就是你带给服务器的query参数。它的category eid,当然这个I是大写。等于什么等于category e就是咱拿到的自定义属性值。那除此之外还有什么,还有二和三,那这咱都搞一下,当然咱们格式化一下,好看一下。那这就是二。那这块呢,也是先要带的2A。那以及这是三,那以及这里呢是S。那你要琢磨琢磨,你现在能直接路由跳转吗?你得把参数整理完毕啊。整理完参数为什么老师要说整理完参数呢?因为现在的这个location。
17:03
和query,他俩需要合并在一起,因为现在是两个对象。咱们可以看它现在是两个对象,你需要把这两个对象进行合并。所以说给咱们的location动态的添加一个query参数,为什么query。那这样你不就进行路由的跳转吗。对不,那就是这点,Dollar router。There push你往哪跳?带的参数那不就是location?那所以说咱们不就完成了路由的跳转以及船参吗?咱们可以看一下你看。对不一级三三级分。对不,那这样咱们不就完成了。对吧。所以说这块呢,要注意,咱们是最终是通过编程式导航,结合事件委派,加上自定义属性,完成这个三级联动的路由的跳转,以及传参的业务。
我来说两句