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

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

查看效果

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

總結

以上是生活随笔為你收集整理的vue vue-router vuex element-ui axios 写一个代理平台的学习笔记（十一）构思商品页面...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。