059-尚硅谷-尚品汇-滚动行为

好嘞，各位同学。那咱们呢，刚才啊，大概的是说了一下子，咱接下来要干什么。那所以说把咱们的这个项目啊给他跑一下。那也就是说，接下来咱们要开发详情的模块。OK吧？那老师问你，你说要开发详情模块，你说你先干什么？对不？所以这块呢，老师呢，接着给你们写一下笔记，就是七开发什么开发。截降就是开发咱们的详情页面。就是某一个产品的详情页面。那老师问你，你说你先干什么？那咱们也写这么多了，你说咱接下来先干什么？你是不是先把静态搞好。静态搞好搞什么，是不是搞请求，搞完请求是不是搞Vue叉，V叉搞完搞什么，是不是回首再搞动态的组件。

所以说你看这不还是当年那几步嘛，第一步干什么，先搞定咱们的静态组件。对不？那第二步干什么？发请求，那发请求不就是API吗？第三步干什么V叉？那第四步干什么？动态的展示组件。所以说你会你会发现咱们这个套路。是不是全都是这个套？对不？那当然老师问你，咱们现在有详情页的这个这个路由组件没有是没有这个静态组件。那所以说咱们回到咱们的这个前台项目资料当中。在代码文件夹当中是不是有静态组件？那这里面呢，老师呢，也给你们准备好了相应的组件，就是谁就是这个detail。Detail是详情详情的路由组件。OK吗？那所以说咱们把底TCTRLC。

复制粘贴到咱们的这个，呃，Views文件夹当中。OK吧？那所以说咱们的静态组件就有了。OK吧，咱们找一下，咱们这是不是就有相应的这个这个这个叫啥detail。对不，这是detail相关的，呃，组件。但是要注意一件事。看这咱们要注意的一件事是什么，就是咱们的这个这个这个这个详情页。哎，详情页的这个这个静态组件，这个组件你要注意咱们还没有注册路由呢。因为咱们在在在这个root当中注册路由组件只有四个。Login home啊，Register和search对不对，所以一定要注意咱们的详情页的组件还没有怎么的，还没有注册为路由组件。

那所以说咱们应该找谁老师问你。你看这这个组件是咱新粘进来的，以前只有这四个是路由组件，而它不是。所以说回到咱们的这个router当中。你要把detail详情页变为啥，变为一个路由组件，你看这不，咱当年写的那四个，而咱detail是没有的，你看home search login和register。那所以说在这咱们要引入谁，引入咱们的详情录入组件in power。D。Tile。Wrong应该谁是应该是at-views下的death。那所以说你这里也要来一个路由组件，也是一级的。对不？那咱们复制一下后给他改一下子。来老师给他格式化一下。

我找你，那首先说这个路径不应该叫杠home了，应该叫啥杠底。对吧，Deal第二个这个组件应该叫啥叫detail了。对不，那以及咱们底下这个这个这个要不要，底下这个这个这个要，呃，特组件咱也要，对不，那这不就完事了。所以说如果你在地址R当中，你手动的输入detail t det，你应该是能看见的。对不，那这不就是咱详情页的静态组件吗？那当然这些数据都是假的。哎，这个能不能懂，就是当前的这个数据都是假的，OK不，你看这是呃，Home设置，你点这个图片的时候，你应该跳转到的是详情页这model。这个能不能走，而且你要明白一件事啊，老师问你。你说你点击了这个产品，跳到详情页，你需不需要告诉detail你点的是谁？你说你需不需要告诉？

嗯，同志们。就举个例子，你说这里面的商品有很多，举个例子，我点它那底，他怎么就知道我点的是它呢？你说需不需要传参，咱先别说传什么，你说需不需要传参。就是点它要跳到路由详情当中，而且要不要参参。给个回音。要不要川菜？因为你至少你得知道你点击的是谁啊。对不？所以你看一下咱们已经上线了这个项目，咱看一下你自己看啊，你看嘛。举个例子，我现在想看的是第五页的这个东西，对吧，比如OPPO，你看我一点，你先看路径的变化你一点。那你是不是得告诉人家，你刚刚那个产品的ID是多少，我是不是要捞相应的详情进行展示？对不？对吧，那所以说一定要注意，像这种传参叫啥叫帕马斯传参。

那如果是para，你得打，你是不是得站位？哎，对不对。如果是para参数你得占位，你看吧，比如我选的是我选的是999，你看吧。是不是要传相应的ID，告诉人家是哪个产品，你捞相应的详情去进行展示。所以说这里呢，一定要注意一件事，什么事。就是当点击这个产品的时候，是要进行路由跳转以及要代餐的。那所以说咱们这里老师问你，你说要不要占位，他得占位。对不，所以说来一个点，咱们就叫做SKUID带个ID过去。所以说这块呢，一定要切记一件事。就是当。哎，当。点击商品的图片的时候，是要跳转到跳转到详情页面。

但是你要注意一件事，什么事在路由跳转的时候需要带上，带上什么？带上。哎，带上产品的ID，对不给谁给咱们的详情页面。对不，所以这块一定一定要注意啊。而且咱们这玩意儿是没有路由的，咱刚刚已经注册完了，以及路由也要传参。那这回咱们回到咱们的设置这里，因为咱们搜索不是在这儿吗。老师，先把没用地先给它折上。那咱们先找一下子展示商品的那块的结构，因为是点这个图片跳转到详情当中，而咱们现在点这个图片没没用。那所以说咱们找的是不是应该是销售产品列表这里。他们应该有一张图片。来老师呢，把这块呢，稍微的这格式化有点恶心，我稍微给他提点让它好看一些，咱们找到那个产品那个图片。

走，那这块老师先给它折上。哎，这块也给它先折上。呃，他应该是谁，是不是应该就是这儿。看一下是不是应该就是钱的上面的。这不就是钱的顶上的这张图片，它是这幅钱，那不就是这张图片吗？对不，那所以说你应该老师问你，你说这块用谁就行了，是不是用声明式导航就可以进行替换了。老师问你，你说这边用生命式导航是不是就可以进行替换，只不过是进行路由的跳转，以及把这个产品的ID给你带过去而已。对不，那所以说咱们把这个A标签给它干掉，给它换成谁，给它换成router-link。对不？对吧，那这块呢，咱们呢，给它来一个root-link，那咱们把咱们的以ma纸标签你给它放起来。

诶。找你。那这块呢，老师呢，稍微呢给他挪挪，那你看ru-link这个声明是导航链接，咱们应该知道必须得有to的属性。对不？To，你要往谁那跳？你是不是要往杠1CH跳？哦，不对，太。Betal，那老师问你要不要代餐？要不要代餐，你要不要把这个产品的ID带回去，是不是得要？那所以说你得用到这个变量，那所以说这块你就不能这么写了，你得给它变成动态的，因为要插入变量。所以说前面给他加个啥，加个冒号。OK吗？那这里面你就可以写什么，写模板字符串。对不往谁那跳，说往咱们的杠，Deal带着谁就带着咱们的这个good的ID，是不是跳转过去，就这能不能看懂。

老师，再问一下这能不能看懂，为什么要变成动态的，因为你这个属性值当中出现了变量。所以说你要带冒号，这是动态的。对不，那咱们测试一下子来看这咱测试一下。这是咱的，举个例子，我现在点的是谁，我点的是999，他带的ID是不是五过去的。对不对，我点的是不是五过去的，完了你再看。我点的是699，你看它的详情。是不是二？就这没问题吧，你看比如说咱现在选的是第九页，第九页这没图啊，咱选个第八页，就比如选这个走，你看是不是545434。老师，你这个没问题吧？所以说一定要注意，咱们在这进行路由跳转的时候，千万别忘记要带啥，带参数，就是在路由。

跳转的时候切记别忘记带ad，对，不是参数。对不，哎，帕数。好嘞。之后呢，路由跳转的时候还有一个小细节，你看一下子啊，你看这还有个小细节，老师问你啊，你看。给老师盯住这个滚轮的位置。盯住这个滚轮的位置啊，你看啊。我现在点击的是999，你看。老师说你你说现在这种现象正常吗。虽然现在这块它还是一个静态组件啊，是一个静态组件，我问你如果看详情，你默认是不是应该是这个滚轮，是不是应该在顶上。是不是得先看这。对不，你看咱们已经上线了这个项目，是不是你看啊。就举个例子，现在老师搜索的是它一点字，你看火轮是不是在这儿？对吧，你看老师再回来你看啊，我现在果仁是不是在这儿呢，我只要一点这个产品进入详情，你看古人他会自己上去。

对不？它就会默认在顶上看详细信息，而你看咱们的这个你看啊，你看咱们的这个你看这。走。果轮是不是在底下呢？来，我一点走，是不是还在底下呢？他是不是应该跑在这个位置。那老师想问的一个问题是，你怎么一点路由跳转的时候能控制这个滚轮一定在顶上。这个怎么搞，当然现在咱这都是假的数据啊，这些都是假数据静态组件。就刚刚老师说的这个问题，能不能理解？先把这个老师要要要阐述的这个问题先给我听懂。给老师一个回音，就是刚刚老师讲的这种现象能不能理解啊？就是你点击产品的时候，滚轮在这儿呢，但是你一点你过来，你滚轮不应该在最底，应该在在最顶上。

对吧，这样用户太不方便了，一进乡情好，我自己再滚上来，那我问你怎么怎怎么去控制。我怎样才能控制咱们的滚轮，一定是在最顶上。怎么控制？说老师我没学过。啊，没学过，没学过没关系，咱们现搞。OK吧，咱们看一下子啊，就是谁呢，就是这你看老师给你们搜一下子就是VE。你看他是有这个的，你看这样。那这个呢，应该是跟路由相关的，就是Lee router。看他的指南。在路由的这个官方文档当中，你看底下这儿。有一个东西看这啊。什么行为？看这就是这块咱没学呢，咱现在只学了个谁路由原信息，对不？你看这这还有个什么什么东西叫做滚动行为。

OK吗？诶O不OK，所以说咱们是可以解决这个滚动条的问题，是路由可以帮咱们解决这个问题。对不？但是在解决这个问题之前，老师想做一件事。为了防止你们以后看路由时这样能看的更清晰，看这来看这儿。老师问你啊。这是咱路由的这个地方，咱们稍微给他整理一下，让他看的更干净一些，老师问你啊，你看啊。我现在route资看没有入资。看这。右侧是数组，数组里面放的是不是都是咱的路由的配置对象？那我问你，我能不能把这个数组咔嚓做了，单独放在一个模块当中，可不可以在这引入行不行？告诉老师行不行，也就是说我把右侧的这个V单独摘出去，就别让他这里面东西太多了。

我把右侧的这个V择出去。再引进来就别全怼吧，在怼吧在这到时候这写东西太多了。所以说咱回回到这儿。老师，再新建一个模块。咱们叫什么叫root z ROs.JS。那这个模块就是就是咱们的那些路由的配置的信息。哎，路遥配置的信息我对外暴露不就行了吗？Export d for，暴露个啥？暴露一个数组，我就问你，我这么写行不行？现在老师就这么写行不行，行吧。也就是说咱们那块的最开始配置的这些路由信息，我是对外暴露的。对不就不在这里再写了。那当然这块要不要用，要用你还得怎么还得引进来。对啊，那当然你这一块呢，你是不是得带走，你看啊，你看这。你看它这里面是不是用到了组建是谁，组建是谁，组建是谁，对不对，组建是谁。

对不？对吧，那所以说你还得把谁也带过，把这些也得带过去，就到这儿能不能跟上。也就是说，你得把这个数组拉过来之后，这个数组里面还在用谁，用那个组件的名字，所以说组件也得捞过来。就这能不能跟上，你看这这是不是在用组件。这是不是用在用组件，这是不是在用组件，但组件也得捞过来。OK吗？所以说咱们只是把这个文件当中的代码太多了，咱稍微往外面搞搞，别全放在这儿。所以说回首再给他引进来，就相当于把刚刚那些代码重新放了个地。这这块咱演一下啊，咱演一下那就演谁。In port叫ROS from应该是咱们的点杠rus。对不？那老师问你那这块的是不是KV一致，是不是可以省略V。

可以看一下这个名字和这个名字是不是一样，KV一致，是不是省略V能不能懂。能不能懂能懂给老师扣一个一，就是你正常写应该叫入特兹等于rots，但是KV一致省略V，这不ES6的特性吗？所以你就可以不用写了，你这回再回首看一下，效果还是一样的。OK吗？就是效果还是一样的，咱只不过是把代码稍微往出搞搞，要不然这里面代码太多了。这里代码太多了。OK不OK吧，好嘞，这是他你看啊。那咱呢，老师刚刚为什么要把它拆一下，因为里面东西太多了，那所以说你看咱们回手再看一下，你看啊。啊走你看吧，跳转过来之后，这个滚动条是不是还是在最底下，但是我想让他一跳进详情页，当应该在最顶上。那这里面就是用到老师刚刚给你们看到的这个东西。

用咱们的VE当中路由，因为是跟路由有关系吗。位于root当中，它有一个进阶的知识点，咱没学过，叫啥看着。叫做滚动行为。OK吗？叫滚动行为。看这啊，看这。看这咱读读。使用前端路由。当切换到新路由时，你看吧。咱是不是在进行路由切换，我从底从色指。我跳转到底是不是在进行路由的切换？对，不想要液面滚动到顶部，或者是保持原先的滚动的位置。就像重新加载页面那样，你需要用到这个滚动的行为。OK吗？而滚动的行为其实就是加上哪行代码，就加上这一行代码就行了。而且底下这儿人家有教你怎么用，你看这儿这个他举了一个例子叫滚动行为。

看这老师直接给到哪，但是你要注意这个滚动行为的这个函数和入兹是不是平级的，看这。看这。这个滚动行为就是滚动条，这个滚动行为和root兹这个配置是不是平级的。对不，咱给他捞过来，你看行不行，你看啊。咱就直接把它放在root兹下面，它俩是不是平级的。是吧，所以这是干什么，这是滚动行为。那这块要注意这块在控制什么，在控制着咱们滚动条水平方向的位置。就是水平方向的位置，那当然这个X咱们没必要用，咱们只需要控制谁控制这个YY是零代表啥？代表的是咱们的滚动条在哪，在最顶部。所以这块老师写一下子，比如说你返回的，返回的这个Y等于零代表什么？代表的是滚动条。

滚动条。在最上方。所以说你看你可以看一下子，咱们这回再看一下这个小细节，一定要给他处理，看这。走。我要点了进到详情页走，你看是不是在最顶上。这能不能懂，那假如说说老师，我这个滚动条距离顶部有点距离，比如说有100像素，那你这玩意就可以写写Y。比如Y等于多少，Y等于100对不？那你这回再看一下子走。来，咱们再搜索一下看这。走你看吗？具顶上是不是有100像素。对不说老师我能再远一点，我具体上假如说有有1000像素，好，那咱写个1000。你看嘛。所以说咱们滚动条的这个，呃，默认的距离顶部的这个，这个路由跳转的时候，距离顶部的这个位置咱是可以控制的，你看嘛，走是不是到1000。

这个能不能懂，能懂给老师扣一个六，就是咱让他默认为多少就行，零就行了。OK吗？比如说每一次路由跳转的时候，都让这个滚动条在最顶上。这能不能懂，能懂的给老师扣一个六。可以吧？当然有的同学可能会想，老师有没有负数？对吧，比如负1000说老师有没有负数，就这滚头条干出去，那咱看你猜它能有吗。它能有吗？它能有吗？它不可能是负的，因为它最小是最小是零。OK吧啊。好了，那这个呢，老师也停一下屏。