在寫商品頁面product.vue之前，我應(yīng)該思考一下，商品頁面要實現(xiàn)那些功能，該不如布局？

要實現(xiàn)的功能

• 1、所有商品列表的展示
• 2、分類商品的列表展示
• 3、搜索商品或得列表展示
• 4、單一商品的詳細頁面
• 5、商品列表分頁功能
• 6、還沒想到的..................

預(yù)想頁面布局

• 1、product.vue頁面分左右兩邊，左邊放商品的分類的類型（如：所有商品、石榴、松子、火腿、其它....），寫成fixed的樣式，右邊一個搜索框，下面放各類列表
• 2、product-content.vue就是一個商品的詳情展示頁面

準(zhǔn)備工作

先模擬數(shù)據(jù)

打開data.js

Image 131.png

添加一個路由來實現(xiàn)商品分類

Image 132.png

檢查才發(fā)現(xiàn)圖上的：class寫錯了，多寫了一個s，當(dāng)然這個命名隨意，但需要使用這個來獲取需要的數(shù)據(jù)，還是寫個容易記的

把相應(yīng)的組件創(chuàng)建出來并引入

創(chuàng)建一個productlist.vue

Image 133.png

編寫product.vue的基本結(jié)構(gòu)

<template>
<div class="container">
  <el-row>
    <el-col :span="6">
      <el-menu
      default-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">導(dǎo)航二</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-setting"></i>
          <span slot="title">導(dǎo)航三</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>

這樣謝了個大體樣子了

把分類商品路由掛到側(cè)邊欄

改寫product.vue

Image 135.png

Image 136.png

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

查看效果

Image 137.png

Image 138.png

可以看出動態(tài)路由是匹配到了的