day06

1.复习
1）search模块需要的服务器数据，已经请求到了，并存贮再来vuex仓库中，有一些数据通过getter进行简化
切记：getters简化数据而生
2）商品列表、平台售卖的属性已经动态数据

1）动态的开发面包屑中的分类名：
编程式导航路由调转（自己跳自己）

2）动态开发面包屑中的文字
2.1 当面包屑中的关键字清除之后，需要让兄弟组件header组件中的关键字清除

设计组件通信：
props：父子
自定义事件：子父
vuex：万能
插槽：父子
pubsub-js：万能
$bus：全局事件总线

在main.js中配置
new Vue({
  render: h => h(App),

// 全局事件总线KaTeX parse error: Expected '}', got 'EOF' at end of input: … Vue.prototype.bus = this;
  },

// 注册路口，kv一致，省略v
  // 注册路由信息，书写router是，组件身上拥有$route,$router属性
  router,
  // 注册仓库，组件实例的身上会多了一个属性KaTeX parse error: Expected 'EOF', got '}' at position 17: …tore属性   store }̲).mount(‘#app’)

•                        
•               {{ searchParams.categoryName               }}

// 删除分类的名字
    removeCategoryName() {
      // 只是把服务器的参数置空了，还需要向服务器发请求
      // 带给服务器参数
      this.searchParams.categoryName = undefined;
      this.searchParams.category1Id = undefined;
      this.searchParams.category2Id = undefined;
      this.searchParams.category3Id = undefined;
      // 地址栏也要修改：进行路由的跳转(现在的路由只是跳转到自己这里)
      // 严谨：路由当中出现params不应改删除，路由跳转的应该带着
      // this.$router.push(name:"search");if(this.$route.params) {
        this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …, params: this.route.params });
      }

this.GetData();
    },
    removeKeyword() {
      // 给服务器带的ssearchParasm下的keyword参数置空
      this.searchParams.keyword = undefined;
      // 再次发请求
      this.GetData();
      // 通知清除header下关键字keyword
      this.$bus.$emit(“clear”)
      // 进行路由的跳转
      if(this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …{         this.router.push({
        “name”:“search”,query:this.$route.query
      })

}
     
    },
  },
在header中的index配置
      if (this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …n.query = this.route.query;
        this.KaTeX parse error: Expected 'EOF', got '}' at position 30: …cation);       }̲     },   },   …bus.$on(“clear”,()=>{
      this.keyword = “”;
     
    })
  }
};
子给父传数据
在searchselector.vue中：

• 
            <li
              v-for=“trademark in trademarkList”
              :key=“trademark.tmId”
              @click=“Trademarkhandler(trademark)”
            >
              {{ trademark.tmName }}
           
         

     

methods: {
    // 品牌方事件处理函数
    Trademarkhandler(trademark) {
      // 点击了品牌，整理参数，让服务器发送请求
      // 父组件发请求
      // searchParams参数需要传递参数
      this.$emit(‘trademarkInfo’,trademark);

},
  },
};
在index.vue中：
     
        <SearchSelector @trademarkInfo=“trademarkInfo” />

// 自定义事件的回调
    trademarkInfo(){

}
平台属性

   

     

{{ attr.attrName }}

     

       

• 
            <li
              v-for=“attrvalue in attr.attrValueList”
              :key=“attrvalue”
              @click=“attrInfo(attr,attrvalue)”
            >
              {{ attrvalue }}
           
         

     

// 品牌方事件处理函数
    Trademarkhandler(trademark) {
      // 点击了品牌，整理参数，让服务器发送请求
      // 父组件发请求
      // searchParams参数需要传递参数
      this.KaTeX parse error: Expected 'EOF', got '}' at position 39: …rademark);     }̲,     // 平台售卖属性…emit(“attrInfo”, attr, attrvalue);
    },
  },
};

•                        
•               {{ searchParams.categoryName               }}

        <SearchSelector @trademarkInfo=“trademarkInfo” @attrInfo=“attrInfo” />

// 自定义事件的回调
    trademarkInfo(trademark) {
      // 1.整理参数
      // 2.重新发送请求

this.searchParams.trademark = ${trademark.tmId}:${trademark.tmName};
      this.GetData();
    },
    removeTrademark() {
      // 将品牌信息置空
      this.searchParams.trademark = undefined;
      // 再次发请求
      this.GetData();
    },
    // 收集平台属性值
    attrInfo(attr, attrvalue) {
      let props = ${attr.attrId}:${attrvalue}:${attr.attrName};
      // console.log(attr,attrvalue);
      // 数组去重
      // if语句中如果只有一条数据，可以省略{}
      if (this.searchParams.props.indexOf(props) == -1) {
        this.searchParams.props.push(props);
        // 再次发请求
        this.GetData();
      }
    },
    removeattr(index) {
      // 再次整理参数
      this.searchParams.props.splice(index,1);
      // 再发请求
      this.GetData();
    },
  },

排序
待定

开发详情页
详情页还没有注册为路由组件
import Detail from ‘@/pages/Detail’;

    {

path:“/detail/:skuid”,
            component:Detail,
            meta:{show:true}
        }
当点击商品的时候，跳转到详情页面，在路由上也带上产品的id

                     
                     
                 
把router信息重新存放在routers.js中
// 路由配置信息

import Home from ‘@/pages/Home’;
import Search from ‘@/pages/Search’;
import Login from ‘@/pages/Login’;
import Register from ‘@/pages/Register’;
import Detail from ‘@/pages/Detail’;
// 配置路由

export default [
    {
        path:“/detail/:skuid”,
        component:Detail,
        meta:{show:true}
    }
    ,{
    path: “/home”,
    component: Home,
    meta:{show:true}
},
{
    path: “/search/:keyword?”,

component: Search,
    meta:{show:true},
    name:“search”,
    //4: 路由组件能不能传递props数据?  
    //布尔值写法:只能传递params参数
    //props:true,
    //对象写法：额外的给路由组件传递一些props
    //props:{a:1,b:2}
    //函数写法:可以params参数、query参数，通过props传递给路由组件
//         props:(KaTeX parse error: Expected '}', got 'EOF' at end of input: …eturn {keyword:route.params.keyword,k:KaTeX parse error: Expected 'EOF', got '}' at position 14: route.query.k}̲ //         } /…route)=>({keyword:$route.params.keyword,k:$route.query.k})
       
},
{
    path: “/login”,
    component: Login,
    meta:{show:false}
}, {
    path: “/register”,
    component: Register,
    meta:{show:false}
},
// 重定向，项目跑起来，访问/，立马重定向到首页
{
    path: “*”,
    redirect: “/home”
}]
在router–》index.js中引用
配置文件，使滚动条处于最上方
// 配置路由的地方
import Vue from ‘vue’;
import VueRouter from ‘vue-router’;
import routers from ‘./routers’;
// 使用插件
Vue.use(VueRouter);
// 引入路由组件
// import Home from ‘@/pages/Home’;
// import Search from ‘@/pages/Search’;
// import Login from ‘@/pages/Login’;
// import Register from ‘@/pages/Register’;

// import Detail from ‘@/pages/Detail’;
// 配置路由
export default new VueRouter({
    // 配置路由
    routes: routers,
    scrollBehavior(to, from, savedPosition) {
        //    返回值y=0 表示滚动条在最上方
            return { y: 0 }
          },
})