开发搜索模块以及优化

搜索模块设置

开发search模块下面的全局typenav商品分类菜单

Typenav在home页面下显示(默认情况下也是为显示状态)

在搜索页面之下隐藏 在这里我们做了一个判断是在哪一个页面之下（如果不是home路由组件将typenav进行隐藏）

// 组件挂载完毕 可以向服务器发请求
  mounted() {
    // 当组件挂载成功，让show属性变为false
    // 如果不是Home路由下组件 将typeNav进行隐藏
    if (this.$route.path != "/home") {
      this.show = false;
    }

当鼠标移入时 让商品分类列表进行展示

// 当鼠标移入时 让商品分类列表进行展示
    enterShow() {
      if (this.$route.path != "/home") {
        this.show = true;
      }
    },
    // 当鼠标离开的时候 让商品分类列表进行隐藏
    leaveShow() {
      this.currentIndex = -1;
      //判断如果是Search路由组件的时候才会执行
      if (this.$route.path != "/home") {
        this.show = false;
      }
    }

开发搜索模块中的typenav商品分类的过度动画效果

过度动画必须条件，元素务必要有v-if/v-show指令才可以进行过度动画设置

包含在transition中，并在其中设置name属性

 //过渡动画开始状态（进入）
    .sort-enter {
      height: 0px;
    }
    // 过渡动画结束状态（进入）
    .sort-enter-to {
      height: 461px;
    }
    // 定义动画时间、速率
    .sort-enter-active {
      transition: all 0.5s linear;
    }

商品分类的优化

派发一个action 获取商品分类的三级列表的数据（放在app.vue里面来），页面显示就开始加载

 mounted() {
    // 通知vuex发请求 获取商品分类的三级列表数据
    this.$store.dispatch("getcategoryList");
  },

合并参数

TypeNav在路由跳转之前进行判断，如果路由跳转的时候，带有params参数，捎带传递过去

如果路由中有params参数，就需要一起传递过去。

 if (this.$route.params) {
          loction.params = this.$route.params;
          //动态给location配置对象添加query属性 整理完参数
          loction.query = query;
          //路由跳转
          this.$router.push(loction);
        }

跳转的回调函数

goSearch() {
      if (this.$route.query) {
        let loction = {
          name: "search",
          params: { keyword: this.keyword || undefined },
        };
        loction.query = this.$route.query;
        this.$router.push(loction);
      }
    },