商品参数（一级类目，二级类目等）以及右边商品参数表显示的原理
可以看到我们点击前两个分类，右边都是没有反应的
点击第三个分类的时候，右边就会有反应
你可以试试点击第三个的时候它其实已经是发送了请求的了，请求路径就在那里，最后一个4是一个参数，这个是什么参数呢？这个其实就是cid，为什么我们以前的参数是问号后面加上参数也就是？后面加上参数名，但是这次不是呢？因为这次显示的是一个参数的页面，也就是这个参数单独的类的页面，包括了这个参数有什么规格和细节上的选择，比如手机的话就是内存多少，颜色是什么，购买方式是什么
像这种分类的一般都是List集合的，为什么这么说呢？因为像这种分类的都是列表呀，一行行的信息下来让你进行配对，他们不就是一个组嘛，因为他们给你分配到一个组里面，也就是List列表里面，他们才会这样子去呈现出来，所以是个List组合，但是我们应该如何去找到这样的列表信息呢？
上次说到一个方法了，就是通过地址去找到它的路由，我们这次也是可以这样子去操作的。
我们可以到前端程序的router里面的index文件里面查看路径，如上图所示，找到它的网址，然后看到路由，从左边找到路由。
这个就是页面左边的列表，都是已经做好了，上面有个xs3，代表的是三格。如下图所示，这个就是三个级别的意思
上面这个是什么意思呢？其实就是行布局的意思，为什么说是行布局的意思呢？
行布局也就是上面这一块的意思，这里就是一行的布局
还有一个要说明的是，为什么我代码里面写了“请选择一个分类”，但是右边却不进行显示呢？
因为不知道你们有没有留意到，我们上面还写了一个v-show，这个有什么作用呢？写了这个以后，下面的就不会显示了，因为没有对应的商品参数等等信息出现，所以接下来的页面都不会发现显示，这就是v-show的作用，他里面的方法会执行一个条件，就是在没有数据库反馈或者有参数规格表进行显示的时候，他是不会让下面的命令进行实现的。
但是如果你有了商品参数以后，你就可以去选择分类，然后下面就有面包屑的出现，也就是各种杂碎的分支，比如这个v-for方法里面的item，item是什么呢？
关于item是什么，我们不知道的话，可以去浏览器进行查找，
这里就是items，我们的item就包含在了里面，看这个就可以了解到，我们这个items是商品的一级分类和二级分类三级分类。
那我们的items是从哪里来的呢？是不是前端页面已经做好了这个数据模型给我们然后进行使用呢？
找了找前端页面，并没有这个数据模型，那它到底是什么?
可以仔细看看这里，可以发现他是个计算属性
什么叫计算属性，也就是他只是负责你点击哪个属性，他就给你返回一个什么路径让你去访问，就像上图一样，它赋予items属性，设置点击事件为currentNode.path，这个是什么意思呢？也就是你如果点击哪个一级类目或者二级类目的话，它会让你去访问相对应的类目地址，它的地址已经写好了放在currentNode里面。下图就是它的路径，有0，1，2三个类目，下面if判断的是什么呢？也就是如果这是个组名的话，它将会在items【3】里面加上组名。我们items数组总共也只是有三个组合，分别是items【0】，items【1】，items【2】，分别对应下图中的三个路径，加上items【3】并且设为组名，那么这个数组就有组名的元素了。
如果返回整个数组的话，因为是横向的，所以他会显示items数组里面的全部元素。
可能有人会问currentNode怎么来的
可以看到，我们选择这两个类目的时候，右边都是没有显示东西的，currentNode也是没有值，currentNode是什么呢？从我刚刚的解释已经可以看出来了，他就是一个显示右边的一个组件，如果它的值为空的话，右边也是没有显示东西的。
但是如果你选择第三级分类的话，他就有值了，而且右边也会显示东西。只不过显示的是横向的东西。
然而这个是怎么实现的呢？我们可以看看他的树状结构，在商品分类那个地方。
我们可以看到他这个点击事件，然后我们去找handleClick这个方法。
然后我们可以找到他这里是有个点击事件，而且设定的参数为node，node是什么呢？其实，node是一个节点，你如果去点击类目，这个node就会把节点接收过来，如果你点击的不是父节点，他就会执行一下命令：
我们上面这两个都是父节点，所以不会执行下面的操作，但是如果点到第三类目，也就是子节点，他就会执行下面的操作。
第一个就是把node赋值给currentNode，让currentNode有值，它就会在右边进行显示。
第二个是什么呢？第二个就是规格组，你设定它的值为true
那么我们这里就可以展示分组。
因为这里我们还需要一个表格，showGroup作用就是让这个表格显示出来。
我们可以看看这个卡片的内容，卡片那种就是组还有商品id，可以从spec-group或者spec-param看出来。
可以看出他们的模型不一样，一个是showGroup，一个是！showGroup，所以两个是一个对立面，如果我们上面的showgroup值为true，那么就显示商品信息，也就是上图中的第一条，如果为false，就显示第二条。
那他们是在哪里导入组件的呢？可以看看小框那里，"./"表示在当前文件下的一个组件文件，
我们可以看一下这个文件。就是一个data-table文件，也就是一个数据表的文件。
上面图片中有个头信息，他的参数在下面这里。
还有一个组信息。
是一个空的集合。
我们需要加载这个group，来进行渲染这些参数。所以我们要进行group的初始化。
我们该如何进行group初始化呢？使用监听方法。
cid是什么呢？cid就是分类的id，也就是你在切换一级类目二级类目等类目的时候，发生变化的是分类id，监听这个分类id的变化，就可以实现如果id变化，就加载数据
然后他就会去发送请求，get里面的参数是请求地址和分类id。这整个方法的意思就是说，如果我们的商品分类发生变化，直到最后选择最后一个商品类目的时候，我们就会发送请求地址，并且获取商品分类id，在右边的界面呈现出相对应的商品参数。
但是我们这个cid是从哪里来的呢？
找了一下没有找到cid的数据模型，但是找到了这个，这个是什么意思呢？props这个是接收数据的意思，接收什么样的数据呢？cid的数字类型，还有默认值是0
他有数据模型，但是是一个自定义组件。
currentNode.id就是代表当前你点击的类目
所以整个流程是怎么样的呢？首先你点击浏览器上面的类目，他就会被监听到，然后去返回对应的数据。你如果加载到最后一个的时候，他就会返回商品的参数给你。