脚本宝典收集整理的这篇文章主要介绍了vue vue-router vuex element-ui axios 写一个代理平台的学习笔记(十一)构思商品页面,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
在写商品页面product.vue之前,我应该思考一下,商品页面要实现那些功能,该不如布局?
先模拟数据
打开data.js
添加一个路由来实现商品分类
检查才发现图上的:class写错了,多写了一个s,当然这个命名随意,但需要使用这个来获取需要的数据,还是写个容易记的把相应的组件创建出来并引入
创建一个productlist.vue
编写product.vue的基本结构
<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">导航二</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 写一个代理平台的学习笔记(十一)构思商品页面全部内容,希望文章能够帮你解决vue vue-router vuex element-ui axios 写一个代理平台的学习笔记(十一)构思商品页面所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。