031-尚硅谷-尚品汇-合并参数

好嘞，各位同学，那么咱们呢，刚刚把这个商品分类的三级啊列表给他搞定了。呃，也就是说该做的呢，其实这里呢，已经做完了，OK吧，那接下来咱们要讲的另外一个知识点是什么呢？是合并参数啊。这里呢，老师呢，先去做一下笔记，这是咱们要做的第三件事情，就是合并参数。哎，合并参数。那这里啊，咱们刚刚解决的方案是什么，是不是在APP跟组件当中，哎，跟组件当中发请求就行了，对吧，因为。跟组间啊，只会他的mounted啊，Mounted执行几次，执行一次。那接下来咱们要讲的另外的一个知识点是什么呢？是合并paramas与query参数。

咱们呢，先别说合并不合并这件事儿，咱们呢，看一下子已经上线的这个项目，咱们看一下。首先说啊，从咱们的后页。你想跳到色尺样？老师问你有几种手段？有两种，第一种是当你选中商品列表的时候，它可以进行跳转，对不传了一些query参数。但是你要注意一件事，什么事？还有一个组件也可以从home首页跳到咱们的设置路由当中，就是谁呢？就是这个搜索按钮。这个搜索按钮呢，是位于hier组件当中，而且是咱们项目第一天讲路由跳转以及路由传参的时候，咱说过，对不也能跳到什么，是不是也能跳到色当中。

而且咱们当时应该知道，当你点击搜索按钮的时候，是可以从后面跳到色池页，而且当时咱们路由传参传了俩，一个叫做keyword，一个叫做big，还有点印象。还有没有点印象？应该还是有点印象对吧，咱们可以看一下就是在哪儿。在咱们的hier组件当中找一下，咱们的hier组件在这儿。咱当年讲陆游传参的时候，您看一下这里咱是不是讲了一个button。对不看这老师呢，把它呢稍微提上来，这样看着能好看一些。咱们讲这个路由，就是第一天讲路由跳转路由传参的时候，咱这里还记不记得，当你一点击搜索这个按钮，给他绑定了一个单击事件，对不单击事件叫什么叫勾search，那干什么，是不是进行跳转到search路由当中，而且是不是也传参了。

对不？那这里呢，老师呢，要说一下子，咱们看一下接口。来看一下接口。那首先说。当你从后页跳到搜索页的时候，搜索页是谁呢？搜索页就是第四个接口啊，这个老师先把名先合上。啊，这个先给它合上看这。这不就是搜索页吗，色页。Search它需要的，呃，咱们先看看他请求的地址是API杠例子，这个请求地址咱们先暂时用不上。以及发请求是什么类型，是POS，咱也用不上。但是你要注意底下的这个参数，看这。当从home跳到色的时候，咱们是要传，至少这几个参数都要传过去的。分别是什么，咱们看一下。商品的名字。对不对。

商品的名字以及相应的一级、二级、三级分类的ID，咱是不是也要传过去，当然你搜索商品那个关键字也要从也要传递给设置路由。就这几个参数能不能看懂，看懂的给老师扣一个一。就是将来怎么用，咱们先不用管，但是你得至少你得知道一件事，什么事这四个参数。哎，这四个参数，将来奢侈路由是要用的。对不，分别是什么商品的名字？以及一级分类、二级分类、三级分类的ID，其实这几个参数咱已经做好了。救谁？不就是这个商品分类的一个三级列表吗？商品的名字我能传过去，以及商品的ID我也能传过去，对不但是你要注意一件事，什么事。

当用户在这里在搜索的时候，比如说你搜过华为。那你也要把这个相应的华为这个关键字也要传给search。这能不能懂，也就是说这些参数到时候人家都要用的。OK吗？你说他为什么要用，咱举个例子看这这是上限。比如说你搜手机。对不，那手机有很多牌子的，比如说有小米的，有苹果等等等一大堆，那我就想搜华为，那我问你在search路由组件当中，华为这个官司要不要要，因为他要发请求，是不是只捞华为的手机。就这个能不能懂。能懂的给老师扣一个一。OK吧，哎，好嘞。好了，那咱们看一下。首先说啊，你先看一下咱们的这个项。那首先说当你，哎，比如说你买手机，对不没问题，你能把相应的产品的名字和ID。

没问题，是不是给咱们的奢侈路由组件是不是传过来，但是你看这儿，那假如说老师想搜谁想搜华为，那你看一下子走。你看是不是query参数没了。就这能不能懂。所以说啊，咱们要合并参数。对不，咱先一点点来。咱先说谁呢？先说咱这个商品三级分类的这个菜单，咱先说他。你看这老师慢慢的给你去说，你看这儿啊。咱们先找到咱们商品分类的这个三级列表。咱找一下路由跳转的那个函数，咱找一下子应该是谁呢？是这个勾search。对不？这里面的注释有点多，呃，以及老师呢，把这些东西都往上提提，省得看着比较恶心啊。看这。

还记不记得当年咱讲商品分类的时候，通过自定义属性捞取这些数据。通过判断判断是不是A，以及是不是一级目录，二级目录还是三级目录，是不是进行路由的跳转。对，不但是你要注意啊，咱商品分类的这个三级列表，你跳转的时候，你带有的只有什么参数，只有query参数。对不？你看咱可以看一下子走，你看这儿。老师呢，给你审查元素啊，看一下咱们的开发者工具啊，看一下咱们开发者工具，看一下这你看当老师点手机。奔过来了，你看咱们看一下咱们的路由组件，看一下咱们的这个这个这个叫谁呀？叫search，你看在他的路由信息当中，你看它只有query参数，你看见了吗。看没看见看这啊，注意给我集中当前是色路由组件，你现在是把query参数，把商品的名字和商品的ID。

路由传参传过来了，而现在的parama参数是一个空对象，为啥？因为咱是只带的para参数，没带para参数，但是你要注意。那如果说我这里我输入一个华为，你想手机有很多，那我一点华为，那你想想咱还得组建这儿。Hier组件当中这个button是不是也进行路由跳转？对，不，但是你要注意他带的餐只有什么餐只有帕。对不？那咱们再来看query quary要当然这个B了，不对啊，咱们把这个B给它去掉。找一下咱的这个hi hi，咱把这个big给它去掉啊，给这个B给它去掉啊，这个big咱是不用的啊，这只是当年讲面试题候说的。看这啊，老师呢，再给你们说一遍，你看这注意力集中。注意力集中。看这当老师点击手机，手机你看这我是不是从home跳到了设置，而且带了query参数没问题，你看吗。

这是不是有相应的query参数？对不，商品的名字，商品的ID是有的，但是para是空的，那你要注意，那如果老师搜的是华为，你看一下子走。你看这儿。所以说para ma是有参数的，是不是华为，但你会发现咱当年的那个宽参数是不是没有了。这个能不能懂。也就是说，咱们现在如果是从这儿跳到色置，或者是从这儿跳色置，不管是query还是para，参数只能有一个。这能懂不？这个能不能懂。能懂的给老师扣一个一。比如说你现在从home跳到色尺没问题，你要么只能带宽参数。对不，你看嘛，咱那块不就是呃，Push的时候只带了query嘛，没有带para对不？或者你只带parama，而query参数没了。

这能懂吗？啊，所以一定要注意，一定要注意，一定要注意，咱们需要合并参数。举个例子。你看这咱就说这个场景，就比如现在老师想搜的谁搜的是手机。那手机名字有了，ID有了，那举个例子，我就想搜华为的，那老师问你这些参数是不是也得给色传过来，以及华为是不是也得给色路由组件，但是现在的长，现在的情况是什么？它两者只能二存一。对，不只能二存一，为什么你看咱的这个商品分类当中，它跳转的时候只带有快参数，它没有para参数。对不对，所以说咱当年的路由跳转你着急了，你还得判断。

所以这里面呢，在跳转之前，你得判断判断什么，写一下判断。也就是说，如果路由跳转的时候带有什么带有。Para参数你也要捎带角给它传递过去。所以说你得判断判断路由当中有没有帕尔马斯参数，如果有，你得带过去。所以判断说，如果你的this.dollar root.para拥有东西，Paras如果有东西，那你该怎么办？也就是说咱刚刚粘贴这样代码，你不仅仅只要带query参数，谁也要带para。所以说给咱们的配置对象再添加一个属性叫para等于什么？等于this.dollar route点。所以说这块一定要注意，如果说路由当中有帕参数，咱点商品分类的时候，你也要把帕也要带出去。

咱们测试一下子，你看这儿。哎，看刚刚写那条代码的作用是啥，你看啊。现在老师问你。现在老师点击手机没问题，我问你query参数有没有带过去。有没有？有没有带query参数，有吧，啊，那假如说你看这啊，假如说你这块呢，咱这儿先这么来，先这么来，你看这老师先搜一个华为没问题。八是不是华为，那你先看一下走，是不是有这个帕参数。你看嘛。是不是有没问题吧，那假如说老师再搜索搜手机不你看。不管是query参数还是帕玛参数，咱是不是都给人家测置路由是不是传过来了，这能不能懂。就这能不能懂。

能懂的给老师扣一个一，所以说你看华为也有了手机，这不也有了吗？就这能不能合并参数。能懂吧，你看老师再说一下子就举个例子，老师现在我先搜华为，那你看他是不是带有帕参数。对不，那假如说老师在设置路由当中，我现在商品分类我要筛选了，我要买手机。对不，那你看这个query参数是不是也带过去了。就这个能不能懂，能懂的给老师扣一个一，所以说现在不管是query参数还是para参数，我都可以带过去。对不，那当然还有一个地儿，那就是这儿。首先说你从商品分类可以跳到设置，当然还有谁，你假如说用户是先点，先点哪儿，先点这儿。对不，手机手机没问题，你看query参数是不是带过来了，看这query参数是不是带过来了，没问题，那假如老师在搜搜这搜华为，你看现在哪个参数没了。

是不是宽没了，只有帕尔马？对不为什么，你看咱的hier这里，如果你路由跳转，它只带了parama参数，你看吧。对不对。这是咱们的hier组件，它在路由跳转的时候只带了帕马斯参数。那你要想明白一件事，什么事，你看这是hi组件这个按钮，那假如说。假如说你先玩的是商品分类的一个三级列表，对不？他是不是已经有query参数了，那如果说你在这儿再来个比如叫华为，那你这么一点，你看你一点，它只带了para参数过去，而人家已有的宽参数你根本没带。对不，所以说你这里你也得判断判断什么判断，当点这个按钮的时候，有没有什么参数，有没有query参数，如果有参数你也得带过去。

所以说你这里这么写它不行，你得判断判断什么，比如说如果从hi点的这块点的时候，face.dollar root。如果你有query参数，你也得带过去，那这里就别这么写了。这里面呢，咱把这个配置对象咱捞出来。给它变成一个对象，叫做location，等于它。对不？那你现在的这种写法只带了pro参数，而没有带qua参数，对不对？那如果说你走这个if代表了，代表的是不是应该有qua参数？那如果有query参数，你是不是也把query参数给人带过去？就这能不能懂。就这能不能懂，同志们这是不是多了一个大花括号啊？还是少了一个，我看一下这有个警告。啊，这多了一个逗号。我看一下这个应该是我看多了还是少了多了一个。

对不？啊，这块老师给他干掉，所以说这块一定要注意，这块代表着如果说你有query参数，那你也要把query参数给你带，所以说location.quarry等于什么？等于this.dollar root.quary完了再跳转this.dollar。Ruler。第二，Push push谁location？对不？哎，Location，我看一下这应该是哪块多了一个啊，嗯，我看一下子啊，少了一个大花块，我看看这是if没问题，这老师给它折上。完了，这块是函数体。没问题吧？我看是不是少了一个，是不是手欠多剁点，哎，对，这回对了吧，这回也不对，我看咱对一下子啊，老师先把这先给他住了。说先给他干掉，应该是多了一个或者少了一个大花括号。看这，呃，这个呢，是咱的这个义以句啊看一下。

有的同学说是分号前面少了，我看一下子啊，分号前面少了哪个分号，我找一下啊。先一个给它折上，这先给它折上。这也给它折上。呃，这也给它折上。对不，这是这个配置对象没问题，这是这个date没问题，这是这个method，这是这个函数函数函数体，对吧，我想这是if，哎，没多呀。六十五行是吧，看一下六十五行啊，这少了一个。对不？所以说这块能不能理解这块代表什么，代表的是如果路径当中有query参数，这代表什么？哎，代表的是如果有宽RY参数，那么也带过去。所以说一定要考虑全了。所以你看这回咱们再看一下子走，不管你怎么玩，Query参数和帕参数都可以带过去。

那它就两种情况呗，哪两种情况，第一种你就看路径，第一种，如果你先点的商品分类，你看手机是不是有了，手机的名字和ID是不是有了，相等CID是不是有了，你再搜华为，你看华为是不是也有。对不？这能懂不能吧，你看还有一种情况是你先点在这儿，你看华为有没有有，那如果有query参数是不是我也带过去。就这能不能懂。这个能不能懂。这个能不能懂，同志们。这个能不能懂，能懂的给老师扣一个六。能不能懂能懂给老师扣个六，就以说这两种情况你都要考虑全了，为什么说是两种情况，因为你有用户有可能先点的商品分类，它只带了query。

对不？那如果出现了para参数，你也要带回去，对不？那还有一种情况就是用户可能先点这华为是不是带有para参数，但是如果你有qua参数，是不我也要带过去。这能懂吧，OK。