在寫商品頁面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

當然我這樣寫相當于把分類的項全部寫死了，但目前我并沒有想到更合理的辦法，所以也只能先這樣了

查看效果

可以看出動態路由是匹配到了的