45_尚硅谷_Vue项目_搭建商家整体界面.avi原创

好，下面我们来讲另外一个就是商家的界面。嗯，我们现在这个商家技能按出来说，这里面是商家列表，每点一个应该是不一样的。能看到吗？嗯，但实际上现在点的都是，其实是打开是同一个。嗯，之所以同一个，是因为后面我们要讲一讲另外一个技术叫Mo数据。这个数据呢，是在前台进行模拟的数据，我就做了一份。其实如果你做了多份的话，是完全可以进行相应的打开的，对吧。好。来啊，我们来看一下。那当前我显示的这一个界面。

应该是个路由组件吧，对吧，那是个路由组件呢，那我们就需要去给这个路由组件取个名字，那很自然，因为我们shop list嘛，那点击了某一个就是一个shop，对不对。那它是一级路由还是二级路由？一级路由对不对，如果是二级，你就得确定它是谁的二级路由对不对，明显它是一个独立的。有没有看到，首先要确定啊，当前整个。是一个一级路由，是啊，这个比较简单，下面一个。我们这个shop的界面里面。它是不是相当于有四个可以切换的table？对吧，每一个table所对应的下面的这个界面是完全不一样的吧，能看出来吧？啊，那为了能够去简化整个说编写，当然你完全可以写在写在一个主页。对吧。

那当然，如果这个实际上是你要知道啊，这整个每一个table所对应的界面部分还是相对来说比较复杂。那此时我们就知道。我们这。三个应该抽取出来，那有人说老师抽成什么呢？抽成1万组件吗。对吧，不是，这里面主要是可以切换啊，可以切换的东西一般其实很简单，就是一个什么路由组件啊，这跟我们前面这个切换是不是一个意思。而且你应该能看的出来，我这三个切换是在我当前整个shop界面的什么。是不是一个部分。也就就在当前界面进行切换了，对不对，所以啊，此时这三个推广所对应的界面。啊，我们刚才说了是路由组件，那这个路由组件是一级路由吗？不是拉。

对吧，这个时候它实际上是嵌入在我们的shop里面显示的，对不对，那也就是说我们这三个路由组件是整个shop是么子路由，也就是他的一个局部嘛。这能听到吗？嗯。好，那整个啊，那也就是说整个我们怎么去下面啊，我们要确定一下我们当前整个界面一个结构，这是我的数。对吧，下面这个部分是不是路由组件部分。这能听到吧。中间这个位置是我那个table吧。对吧，呃，这个table里面是不是有几个table选项。是吧，上面整个是他的什么。是头部吧？头部，因为头部呢，有点小复杂，应该把它单独的抽取出去。

这个能懂吧，那也就是说我们这个头大家看看整个结构就出来了啊。这整个上面呢，最外面是shop。啊，上面呢，是要取个名字啊。啊，可以叫秀判的可以吧，可以吧，可以啊好，那中间的这个要不要抽了。其实中间这个倒倒没有必要，因为它并不复杂，知道吧，就就外面一个div，里面套三个div嘛。听懂吧，当然，如果你觉得是无钱抽取，那你抽也吸，这都没关系的。好，下面下面就是我的路由组件的部分，那我们就确定我们是不是有三个路由组件。啊，这个是点餐的，那这个是什么呢？这十上是不是显示的是食物列表啊。那我们就叫它什么呢？Good？

因为实物列表嘛，来是吧，那那评价。评价实际上是衔接我商家的评价一个列表吧。那应该叫什么？需评价，大家可能不知道单词，没关系啊，叫啊。好评论评价下面一个商家啊，实际上显示的是商家的一些相关信息啊，那我可以叫说话什么。Inform相关信息吗？那也就是说我们现在要去创建，一共创建几个路由组件。四个对不对，一个一级的，一个三个二级的对不对，还要创建一个一般组件叫什么。

啊，把它分析好了，后面就是要去写，说白了就是我们要通过分析确定我们整个组件的一个结构，接着最后把界面搭建出来。好，来吧。看到这里啊，我们先把路由组件创建出来啊。Pages里面首先创建一个一级路由。叫什么没问题啊。创建个文件就叫设好下一个说的我们后面的三个路由是不是都是他的子路由啊，好，这个时候看我啊。看C。看见V，我们刚才第一个叫什么来着。Shop good，你看我的shop good，诶，我的shop裤子啊，在这里拉进去。记住，给他拉进去。

把这个改改名字。这个能不能看到，因为我这个地方是要创一个直流，我在创建组件文件夹的时候，哎，我就形成这样一个嵌套关系。这一看就能看得懂。能懂我意思吧，你说老师我不这么签到行不行？没问题，这不是绝对的。看到吧。能不能懂，能懂啊好，来，我们把这个故事里面呢写点东西。好，下面啊，是不是还有另外两个。在还有什么啊，商家评论的列表。把这个名字也改一下。改一下名字没问题是吧，接着还有说是吧音。

嗯，取消了，改一改。好，把这个里面的文件名也改一下，这个倒没什么难度，刚才的分析是最关键的。四个路由组件是不是都创建好了，还有一个什么。一般的组件是吧。来写一个叫什么head。Superhan哪一个文件superhan？写一下。好，下面呢，我们要去将这四个路由组件给它注册成什么。主要干嘛去？注册成路由啊，对吧，那接着我们先得干嘛引入啊。

来，先把那个数给引一下。说引了以后呢，就是他的三个二级路由是吧，指路由，呃，说下面的。Shop good下面的shop good.you是吧？好，另外两个是不是跟这个类似啊？嗯，看一看叫。还有一个叫shop info。社会O。社会预报。可以吧，可以了啊，好，下面我们要将它印刷上。拷贝一个呗，对不对，先去映射的是我那个说法。

是吧，接着路径是什么小写的好，他是不是有三个指路由，来个什么children。能不能？啊，数组不是对象是吧？啊，因为是多个。好。来啊，我们来去一共有三个是吧，三个呢，分别啊背音色的是叫shop goods，它的路径是个什么样的路径？首先是shop，接着下面呢，可以搞一个什么呢？故，这看得出来是shop的故事嘛，对不对，没有必要再在后面再写个什么shop故。郑州。好，那后面呢，实际上跟这个跟这个是类似的，对吧，这种好还有什么shop ras。

对吧，那我后面就叫什么呗。好，接着是下面先把这个名字写好啊。嗯，把这名字写一下，叫shop info，那我后面就写什么info。还一个小事情。嗯，还有一个小事，当我去请求说的时候。当我去请求说是大概呢，说默认就会显示故障，要不搞默认的话，下面是空白的，懂不懂这样就不太好了。来再写一个跟这个类似的一个。路由是吧，这个呢，写个单引号就行。懂不懂就相当于你已经请求到了说法，那自动跳到哪去了，跳到这里来呗。

对吧，这个应该是没有问题的。嗯，好，那我们的路由这边配置好了，那下面呢，我们就要去使用上他们，使用上他们呢，得从外面这个位置啊，外面这个位置开始做起，大家看啊。我们最先看到那个shop是不是点击这一个，所以我们要干嘛去来找到一个组件叫。能看到吧，找到这个以后，它每一个ii是不是就是某一项，对不，我要给它的某一项干嘛去。每一项。都绑定一个。艾克等于。怎么写？

多了点，是push还是？能不能用replace不能，因为它可以回退的，对吧，所以说必然是什么push，那我们当前就简单做一下，直接去找到谁说好就行。能不懂？啊，按说来说，如果我们啊是要对应的显示的话，这里面还要指定你的当前这个shop的一个标识。对不，你才能去显示某一个商家嘛，对到吧，主要是我们现在是不是就一个呀，啊，我们就设计了一个。好。来，那也就是说我们现在啊，再去点击它，看到我这边暂时先写个数。可以吧，我们来看一下，看看能不能显示法。在这呗。

对吧，点击。是吧，对，但是呢，现在肯定不行嘛，对不对啊，我们要把整个结构是不是搭出来啊，啊，整个结构拉出也定不来。我们不是相当于是一个上中下的结构吗？最上面应该是谁呀，对吧，Shop hand from啊退一下components下面的。Hand下面的点view。接着是将它映射成主键标签是吧，接着是写这个标签句。有没有看到？那下面是什么部分，是不是导航啊，那导航的table啊，那就来个div，我可以给他一个ID，就叫什么呢？Table可以吧，接着里面是不是应该有三个div，每个div啊，每个div都有一个，都有一个I，都有一个类名，假设我叫他table item。

可以不，每一个table里面实际上是不是一个路由链接，那我就来个什么link能不能看到，而且这个地方应该有一个什么。To这个应该是个什么？是是第一个是叫点餐对吧，是吧，而这个to出哪去了，斜杠下面的故。能看到吧，那其实一共有什么三个。对吧，接着把他们是不是先改名字，这个是叫呃评价对吧。

没问题，这一个是什么ratings接着是什么，就交吧。生成相关信息。这应该写什么应付？能看到吧，啊，那在table的下面是什么。这么是不上中下的结构吗？能不能看到好来啊，我们现在来大家看一下，现在肯定就是有一点就是这个样式不太好，对不对，但是我们可以稍微的去点一下，可以点了，但看它显示现在什么售后故执啊，接着我点这个。是音，看上面录音变化是不是也变了，再点三加。呃，评价点评价啊。能看到吧，可以吧，可以，只是我们要是不是要写好的样式，那这个中间是不是能水平显示要有一个好的样子啊。

能理解吧？好，这时候我把这个把整个这个拿过来啊。啊，这个相信大家是应该是可以写的啊，整个我们相当于现在我们是不是实现了整个我们界面一个搭建的，就这样的一个，大概就是这么一个情况。但是我们头部和下面的这一个底部都还没写是吧，嗯。那后面我们的任务呢，就是要去把头部底部都写出来。