026-尚硅谷-尚品汇-三级联动路由跳转的分析

哈喽，各位小伙伴们大家好。那接下来啊，咱们呢，去完成三级联动组件的路由跳转与传参的业务。那咱们呢，先看一下子已经完成的这个项目。那首先说啊，用户呢，可以在三级联动这里啊进行选择。比如说啊，咱们先看一级分类。比如说当老师点击手机的时候。那你会发现一件事，什么事会从home模块跳转到色模块当中？而且呢，它进行了路由的跳转以及传递参数。会把你相应选中的一级分类产品的名字以及ID传递给设置路由。那么设置路由呢？拿到参数呢，就会向服务器发请求，索要相应的数据进行展示。

当然啊，你也可以点击，比如说这个二级分类。当你点击二级分类的时候也是一样，也会从后跳转到设置模块，那么也会把相应的这个参数，比如说二级分类的名字以及二级分类的ID。传递给咱们的色情模块，那么色程模块也是一样，拿到这些参数会向服务器发请求，展示相应的数据。那当然以及三级分类呢，也是一样的。当你点击，比如说老师刚刚点击的是三级分类的手机，那也是从home模块跳转到设置模块当中，以及呢，也传递了相应三级分类的产品的名字和ID。那么测也是拿到参数，仅展示相应的数据。那这里呢，咱们也去做一下笔记。

那也就是说啊，咱们的三级联动用户是可以怎么的，哎，可以点击的。你可以点击一级分类，二级分类或者是三级分类都可以，对吧，比如说一级分类。二级分类。以及还有相应的三级分类。那么，当你。点击的时候，它呢，会从home模块那么跳转到search模块。那以及啊，会把用户选中的产品。对吧，比如说产品的名字，产品的名字以及还有什么呢，就是产品的ID，那么在路由跳转的时候，哎，路由。跳转的时候会进行传递。

啊，进行传递。那咱们呢，就去实现这个功能。那首先说啊，我相信很多小伙伴都应该知道，这个路由跳转它就两种方式。第一种是什么呢？是咱们的声明式导航。声明式导航就是谁呢？Link？哎，Router-link。第二种呢，就是编程式导航。分别是push或者是方法。当然啊，你通过声明式导航或者是编程式导航，其实它两者的功能差不多。只不过编程式导航啊，可以书写一些自己的业务逻辑。对吧，那咱们呢，去找到咱们相应的这个三级联动。找到它的这个结构对吧，那咱们呢，就去尝试一下。那咱们呢，去找一下咱们的三级联动在哪儿呢？是不是就在这儿。

那咱们呢，分别要找到什么呢？找到相应的这个A标签。因为A标签的身上啊，你看这不就是那个一级分类，二级分类和三级分类的那个名字吗。那也就是说当你点击谁的时候呢？当你点击A标签的时候，要进行路由跳转。对吧，因为你看这个A，它放的不就是一级分类的名字，二级分类和三级分类的名字吗。那咱们呢，先尝试一下子，声明是道行。也就是说把你的这个A给它换成谁呢？换成咱们的router-link，那咱们尝试一下router。哎，杠零。那这里啊，咱们也需要把一级分类的名字叫做C一点开。GR啊，Cat name，那给人替换上。那以及你要往哪跳，To，那应该是告诉谁啊色，但是咱们相应的一级分类的，呃，产品的名字和ID咱们先不传。

对吧，咱们先尝试一下用router link，它行不行。那以及还有谁呢，还有咱们二级分类，那这里老师呢，也给它注上，给这儿也给他替换一下。那当然这里呢，你得变成C几啊C2。那以及还有三级分类者，那咱们也给他注释上。对吧，那也给他来个link，那这个应该是谁呢？是C3。对吧，那咱们保存一下，回到咱们的项目当中，咱们先看一下。首先说啊，老师点击手机OK，那是能进行路由跳转的，对吧，那这指定是没问题的，但是这里面的要注意一个细节，你看啊。当老师鼠标移动过快的时候，你会发现明显这个背景颜色跟不上，有卡顿现象。对不对，你看它明显没有像原来那样的丝滑。

那这里是为什么呢？咱们得说一下，看这。首先说啊，三级联动，这里三级联动，比如这里，那么如果使用谁啊，使用声明是导航router。杠link它呢是可以实现什么呀，实现路由的。跳转与传递参数，当然它是可以的。但是需要注意。出现了什么？出现了卡顿的现象？那么为什么会出现卡顿的现象呢？那这里呢，咱们得琢磨琢磨。那首先说router-link，它是一个什么呀？它可是一个组件，一个组件。对不？你想组建一般都是view comp类的一个实例。那这里呢，你要想明白一件事，如果你这里都给它替换为router link，那也就是说当服务器的数据回来之后，当。

服务器的数据返回之后。那么你循环啊，循环出啊很多的这个root-link。对吧，那这个呢，一定要注意啊，你想想rootor杠是一个组件，你是要咋的，你是要创建组建实力的。对吧，而且还要把虚拟档转化为真实刀。那你想想这一个循环，你要想明白这个循环，你看咱就看这些123级联动，这些A标签，他可能上千了。对吧，就是这个组件可能1000加了。对不，那所以说要注意一件事，什么事，在创建组件实力的时候。你一瞬间一瞬间对吧，比如说创建了1000家，它是很耗内存的。

因此出现了什么，出现了ii，出现了卡顿的现象。所以说咱们这里呢，就不再采用root-link声明式导航进行路由跳转了，因为它出现了卡顿现象。就是由于。咱们的router link组件实力过多，一瞬间整了1000多个。对吧，所以说会出现这种卡顿现象，那所以说咱们这里呢，就不再用什么了，用这个生命式导航。那就说生命式导航，你不用，那没有别的选择了，你只有谁，你只有编程式导航了。那编程式导航呢，那咱咱咱这个好整的，那就说当你点击A标签的时候，那咱可以来啊，你看比如说艾click。比如说呢，咱起个名字叫做go search。对不，那以及底下这里也是一样，给他绑定单击事件叫做艾click。

他呢，也叫什么叫做go search。那以及底部这里也是一样，那咱也给他来一个叫I click，等于什么呀，叫做go search。但是这块呢，你要琢磨琢磨，这种写法可不可以可以。但是呢，你从性能的角度出发呢，他也不是很好。你看咱们先可以看一下子走，老师呢，在这呢，我给他写上这个叫go search。哎，进行。路遥。跳转的方法叫做go search。那么当你一点击的时候，跳转到啊，Dollar router，第2PUSH跳转到咱们的杠色模块当中。那咱们先看一下它有没有卡顿现象，那指定是没有的，你点它也能进行路由的跳转。对，不但是这里呢，老师呢，还是得说道说道这种写法呢，也不算最优秀的，为什么呢，你琢磨琢磨。

那首先说咱们的这个循环，你就想想刚刚link它可能有1000多个。那你想想，每一个A标签，每一个A标签，每一个A标签是不是都要绑定属于自己的回调？那么你的这种写法呢，可能说咱们的这个回调函数有1000多个。对不，也就是说每一个A标签都有属于自己的啥回调，那你循环会导致有1000个回调函数。那举个例子，那老师问你，你说有1000个回调和有一个哪个更好一些，那指定是有一个回调。对吧，所以说啊，咱们这里呢，这种写法呢，也不算是最优秀的，那最优秀的写法是什么呢？就是利用事件的委派。咱们呢，可以怎么办呢？可以这么办，你看老师把这个点击事件写在谁这儿呢？写在他就近的负元素这里。

对吧，哎，就比如说在哪呢？就比如说给它放在这儿，或者放在这个div都可以，就放在这儿，叫做go search。对吧，那再来一个叫做at click。叫做勾。I go search search。对不，那当然那这块是没有经历过循环语句的。那也就是说这块的回调只有几个，只有一个，那相比刚才的那种写法，他会更优秀一些。对不？你看你点击的时候也能进行路由跳转，而你这个回调只需要出现一次即可。但是如果你是利用事件委派去，时间又出现了一些问题。对不？你看咱们在这里写一下子，比如说咱们的最好的解决方案是什么呀，最好。最好的解决的方案。是什么呢？就是利用编程式导航结合谁加上咱们的事件的委派。

但是如果你用事件的委派，又存在了很多问题。第一个问题是什么呢？就是当前的这个复合子div，它里面的子元素很多。有div有H3有A对吧，还有什么DT。你怎么知道你点击的一定是A标签呢？对吧，所以这块老师做一下笔记，比如说如果利用什么利用事件的委派，它存在的一些问题咱们是需要解决的，第一个问题是你怎么就能知道你点击的一定是这个负元素当中的A标签。对不，因为咱们是事件委派啊，那这个负节点的所有的子节点，他们单机事件都委派给了这个div，但是这里面的子节电有很多，有div有H3，有A，有DL，有DT有em，你怎么就知道点击的一定是A标签。

对吧，就第一个问题，你怎么知道点击的。点击的一定是A标签的，因为咱们是点击A标签进行路由调整。对吧，这是第一个问题，第二个问题。咱们路由跳转的时候是需要传递参数的，那这个参数如何获取到？对吧，比如说如何获取参数，什么参数呢，比如说一。二三级哎，分类的产品的名字。对吧，怕啥怕的，箱子ID路由跳转的时候是需要传的，那你怎么解决呢。对不，那所以说到现在为止，你得知道，那咱们的最好的解决方案呢，就是利用着编程式导航，以及结合事件委派，但是事件委派又存在一些问题，那咱们呢，稍后会进行处理。