Day 3,4 (43-70)
3.1 监听路由变化再次发请求获取数据
监听路由变化$route
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bYOTqFFy-1642475400001)(C:\Users\22982\AppData\Roaming\Typora\typora-user-images\image-20220114131331706.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bPMHuLt6-1642475400002)(C:\Users\22982\AppData\Roaming\Typora\typora-user-images\image-20220114131353490.png)]
watch:{
// 监听路由信息是否发生变化,发生则再发请求
$route(){
Object.assign(this.searchParams,this.$route.query,this.$route.params)
// 再发起ajax请求
this.getData()
// 置空1.2.3级id
this.searchParams.category1Id=''
this.searchParams.category2Id=''
this.searchParams.category3Id=''
}
}
Q:为什么分类名字和keyword不用改?
A:每次路由变化时,都会赋予新的数据
3.3 商品柜-面包屑处理分类的操作
removeCategoryName(){
// 把服务器参数置空并再发一次请求
// 带给服务器参数可有可无,若属性值为空的字符串还是会把相应字段带给服务器
// 但将相应字段值改为undefined,便不会带给服务器
this.searchParams.categoryName=undefined
// 置空1.2.3级id
this.searchParams.category1Id=undefined
this.searchParams.category2Id=undefined
this.searchParams.category3Id=undefined
this.searchParams.category3id=undefined
this.getData()
// 地址栏也需要置空:路由跳转
if(this.$route.params){
// 本意删除query,若路径当中出现params不应该删除,路由跳转时应该带着
this.$router.push({
name:"search",params:this.$route.params})
}
}
编程式导航路由跳转【自己跳自己】
3.4 面包屑处理关键字
当面包屑中关键字清除后,需要兄弟组件Header组件中的关键字清除
想到组建通信
- props:父子
- 自定义事件:子父
- vuex:万能
- 插槽:父子
- pubsub-js:完成
- $bus:全局事件总线
3.5 面包屑处理品牌信息
Q:在哪个组件发请求,为什么?
A:父组件,因为父组件中searchParams参数是带给服务器参数,子组件把点击的品牌信息给父组件传过去(子传父)-----------自定义事件
<!--selector-->子组件index.vue
<SearchSelector @trademarkInfo="trademarkInfo"/>
父组件js
// 自定义事件回调
trademarkInfo(trademark){
// console.log(1111,trademark);
// 整理品牌字段
this.searchParams.trademark=`${
trademark.tmId}:${
trademark.tmName}`
// 再次发请求
this.getData()
},
// 删除品牌信息
removeTrademark(){
// 将品牌置空
this.searchParams.trademark=undefined
// 再次发请求
this.getData()
}
子组件js
// 品牌处理函数
trademarkHandler(trademark) {
// 点击品牌(苹果),还需整理参数,向服务器发请求获取相应数据进行展示
this.$emit("trademarkInfo", trademark);
},
3.6 平台售卖属性操作
平台售卖属性值的展示面包屑
<li class="with-x" v-for="(attrValue,index) in searchParams.props" :key="index">{
{
attrValue.split(':')[1]}}<i @click="removeAttr(index)">×</i></li>
子组件SearchSelector
<!-- 平台售卖的属性的属性值:粉色,蓝色... -->
<li v-for="(attrValue, index) in attrs.attrValueList" :key="index" @click="attrInfo(attrs,attrValue)">
<a>{
{ attrValue }}</a>
// 平台售卖属性值的点击事件
attrInfo(attrs,attrValue){
// ["属性ID:属性值:属性名"]
this.$emit("attrInfo",attrs,attrValue)
}
收集平台属性的回调函数
attrInfo(attr,attrValue){
// 参数格式整理好
let props=`${
attr.attrId}:${
attrValue}:${
attr.attrName}`
// 数组去重
if(this.searchParams.props.indexOf(props)==-1){
this.searchParams.props.push(props)
}
// 再次发请求
this.getData()
},
删除售卖属性</