在写商品页面product.vue之前，我应该思考一下，商品页面要实现那些功能，该不如布局？

要实现的功能

• 1、所有商品列表的展示
• 2、分类商品的列表展示

• 3、搜索商品或得列表展示
• 4、单一商品的详细页面
• 5、商品列表分页功能
• 6、还没想到的..................

预想页面布局

• 1、product.vue页面分左右两边，左边放商品的分类的类型（如：所有商品、石榴、松子、火腿、其它....），写成fixed的样式，右边一个搜索框，下面放各类列表
• 2、product-content.vue就是一个商品的详情展示页面

准备工作

先模拟数据
打开data.js

添加一个路由来实现商品分类

检查才发现图上的：class写错了，多写了一个s，当然这个命名随意，但需要使用这个来获取需要的数据，还是写个容易记的

把相应的组件创建出来并引入

创建一个productlist.vue

编写product.vue的基本结构

<template>
<div class="container"><el-row><el-col :span="6"><el-menudefault-active="2"class="el-menu-vertical-demo"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"active-background-color="#ffd04b"><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3"><i class="el-icon-setting"></i><span slot="title">导航三</span></el-menu-item></el-menu>  </el-col><el-col :span="18"><el-input type="text"class="el-input"placeholder="请输入商品名"v-model="searchName"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input><el-button type="primary"@click="search">搜索</el-button><router-view></router-view></el-col></el-row>
</div></template>
<script>
export default {data () {return {searchName: ''}},methods: {search () {console.log('search')}}
}
</script>
<style scoped>
.el-input {margin: 20px 0;width: 80%;
}</style>

这样谢了个大体样子了

把分类商品路由挂到侧边栏

改写product.vue

当然我这样写相当于把分类的项全部写死了，但目前我并没有想到更合理的办法，所以也只能先这样了

查看效果

可以看出动态路由是匹配到了的