vue前台（六点一）
一，解决search多次跳转返回不能一次返回到首页
1.在search组件中，将push改成replace,没有路由历史记录，可以直接返回到home页
1.1, 在从search页跳转到search页，不需要有路由记录，直接用replace
//删除面包屑的类别名称
removeCategoryName() {
this.searchParams.categoryName = "";
this.searchParams.pageNo = 1;
// 删除面包屑路径当中对应的类别名称还在
// 不能在这直接发请求，因为这样路由是不变化的
// 我们应该让路由去变化，发请求
// this.getGoodsListInfo();
// this.$router.push({name:'search',params:this.$route.params})
this.$router.replace({ name: "search", params: this.$route.params });
},
//删除面包屑的关键字keyword
removeKeyword() {
this.searchParams.keyword = "";
this.searchParams.pageNo = 1;
this.$bus.$emit("clearKeyword"); //使用全局时间总线通知header组件去清空关键字搜索框
// this.getGoodsListInfo();
// this.$router.push({name:'search',query:this.$route.query})
this.$router.replace({ name: "search", query: this.$route.query });
},
1.2, 对于typenav组件，在home路径和search路径都有，我们需要判断下它在哪个路径下，如果是在search路径，则跳转路由时用replace
//点击分类跳转到search
toSearch(event) {
let data = event.target.dataset; //拿到所有儿子元素身上所有的自定义属性组成的一个对象
// console.log(data)
let { categoryname, category1id, category2id, category3id } = data;
if (categoryname) {
//点的一定是a标签，我们要点的
let location = {
name: "search"
};
let query = {};
query.categoryName = categoryname
if (category1id) {
query.category1Id = category1id
} else if (category2id) {
query.category2Id = category2id
} else {
query.category3Id = category3id
}
location.query = query
//点击三级分类的时候，我们也不能光关注query参数，也要去看看之前有没有params参数
//如果有，需要把之前的params参数也带上
let {params} = this.$route
if(params){
location.params = params
}
//看是否是从首页去到search页
if(this.$route.path != '/home'){
this.$router.replace(location);
}else{
this.$router.push(location);
}
}
}
1.3, 在header组件，路由跳转，也要判断下是处于哪个路径下跳转，在search路径跳转，用replace
//看是否是从首页去到search页
if (this.$route.path != "/home") {
this.$router.replace(location);
} else {
this.$router.push(location);
}
响应式对象属性的添加和删除
对象当中的属性数据更改会导致页面更改，响应式数据
添加：
错的：如果对象当中没有对应的属性数据： 直接添加一个属性，这个属性不是响应式的
因为vue只是在开始对对象当中的所有属性添加getter和setter，后期直接添加的没有
对的：我们需要使用Vue.set方法 这样的添加属性就是响应式的 必须对响应式对象添加属性
删除：
错的： 直接delete删除对象当中的属性，不会导致页面更改
因为响应式属性只是在检测属性值的改变而不是检测属性的删除
对的：我们需要使用Vue.delete方法 除了删除，还添加了更新界面的操作
二，阿里图标字体在线使用
在在public文件夹的html中引入图标css连接，前面加https:
在html中引入
<link rel="stylesheet" href="./css/reset.css"> <link rel="stylesheet" href="https://at.alicdn.com/t/font_1952968_i6qdilxadv.css"> </head>
在search组件的模板中引入图标类
<li> <a href="#">价格 <i class=" iconfont icondown"></i> </a> </li>
三，排序的背景色，图标的动态显示
<ul class="sui-nav"> <li class="active"> <a href="#">综合 <i class="iconfont iconup"></i> </a> </li> <li> <a href="#">销量</a> </li> <li> <a href="#">新品</a> </li> <li> <a href="#">评价</a> </li> <li> <a href="#">价格 <i class=" iconfont icondown"></i> </a> </li> </ul>
3.1，active这个类是死的，只是对综合的样式起作用，我们需要搞成动态的类，让他点击价格，动态也显示
order: "2:desc", //排序标志：排序类型 1代表综合排序 2代表价格排序 asc升序 desc降序
<li :class="{active:searchParams.order.split(':')[0] === '1'}"> <a href="#">综合 <i class="iconfont iconup"></i> </a>
<li :class="{active:searchParams.order.split(':')[0] === '2'}"> <a href="#">价格 <i class=" iconfont icondown"></i> </a> </li>
3.2 ，但是，此时如果类是指向了综合，那么价格的箭头需要隐藏，此时箭头这个类也需要动态显示
<li :class="{active:searchParams.order.split(':')[0] === '1'}"> <a href="#">综合 <i class="iconfont iconup" v-if="searchParams.order.split(':')[0] === '1'"></i> </a> </li>
<li :class="{active:searchParams.order.split(':')[0] === '2'}"> <a href="#">价格 <i class=" iconfont icondown" v-if="searchParams.order.split(':')[0] === '2'"></i> </a> </li>
3.3， 此时各类指标的向上箭头和向下箭头显示也是动态显示，
<li :class="{active:searchParams.order.split(':')[0] === '1'}"> <a href="#">综合 <i class="iconfont " :class="{iconup:searchParams.order.split(':')[1] === 'asc', icondown:searchParams.order.split(':')[1] === 'desc'}" v-if="searchParams.order.split(':')[0] === '1'"></i> </a> </li>
<li :class="{active:searchParams.order.split(':')[0] === '2'}"> <a href="#">价格 <i class=" iconfont" :class="{iconup:searchParams.order.split(':')[1] === 'asc', icondown:searchParams.order.split(':')[1] === 'desc'}" v-if="searchParams.order.split(':')[0] === '2'"></i> </a> </li>
3.4， 用户点击各类指标，如果点击的是同一个指标，更改他的排序规则， 如果点击的不是同一个指标，默认排序为desc
<li :class="{active:searchParams.order.split(':')[0] === '1'}"> <a href="javascript:;" @click="sortGoods('1')">综合 <i class="iconfont " :class="{iconup:searchParams.order.split(':')[1] === 'asc', icondown:searchParams.order.split(':')[1] === 'desc'}" v-if="searchParams.order.split(':')[0] === '1'"></i> </a> </li>
<li :class="{active:searchParams.order.split(':')[0] === '2'}"> <a href="javascript:;" @click="sortGoods('2')">价格 <i class=" iconfont " :class="{iconup:searchParams.order.split(':')[1] === 'asc', icondown:searchParams.order.split(':')[1] === 'desc'}" v-if="searchParams.order.split(':')[0] === '2'"></i> </a> </li>
js代码
//排序的所有
sortGoods(sortFlag){
//优化前
// let originFlag = this.searchParams.order.split(':')[0]
// let originType= this.searchParams.order.split(':')[1]
//优化后
let originFlag = this.sortFlag
let originType= this.sortType
let newOrder //准备改变的排序规则
if(sortFlag === originFlag){
//证明标志一样，点的还是原来排序的项
newOrder = `${sortFlag}:${originType === 'desc'?'asc':'desc'}`
}else{
//如果原始的排序flag和传过来的flag不一样，证明点击的不是原来的排序项
newOrder = `${sortFlag}:desc`
}
//排序规则改变后，需要重新发请求拿新的排序规则的数据
this.searchParams.order = newOrder
this.getGoodsListInfo();
},
类的颜色
.active {
a {
background-color: #fff;
color: #e1251b;
border-color: #fff;
cursor: default;
}
}
初始化数据
data() {
return {
//初始化搜索参数（收集搜索参数）
//为搜索请求提供搜索参数
searchParams: {
category1Id: "",
category2Id: "",
category3Id: "",
categoryName: "",
keyword: "",
order: "2:desc", //排序标志：排序类型 1代表综合排序 2代表价格排序 asc升序 desc降序
// 当前页码数
pageNo: 1,
// 每页图片数
pageSize: 4,
props: [],
trademark: ""
},
};
},
3.5 排序规则代码优化，对类型指标和排序规则代码优化
computed: {
...mapGetters(["attrsList", "trademarkList", "goodsList"]),
originFlag(){
return this.searchParams.order.split(':')[0]
},
originType(){
return this.searchParams.order.split(':')[1]
}
},
模板代码优化下，更直观
<!-- 优化后 --> <li :class="{active:sortFlag === '1'}"> <a href="javascript:;" @click="sortGoods('1')"> 综合 <i class="iconfont" :class="{iconup:sortType==='asc',icondown:sortType==='desc'}" v-if="sortFlag === '1'" ></i> </a> </li>
