尚硅谷VUE项目-前端项目问题总结03

1 菜单的三级联动

1.1三级联动—鼠标移动到菜单时，一级菜单背景为skyblue

两种：
1.css

    .item:hover{
          background:pink;
    }

2.定义一个变量currentIndex=-1通过 @mouseenter=“changeIndex(index)函数控制行数，
定义一个动态类cur,样式为skyblue :class=”{cur:currentIndex==index}

  data(){
    return{
      currentIndex:-1,
    }
  },

 <div class="item" v-for="(c1,index) in categoryList" :key="c1.categoryId" :class="{cur:currentIndex==index}">
       <h3 @mouseenter="changeIndex(index)">
           <a href="">{{c1.categoryName}}</a>
       </h3>
 </div>
 /
.cur{
          background: skyblue;
    }
/
changeIndex(index){
      this.currentIndex=index
},
leaveIndex(){
      this.currentIndex=-1
},

**注意要求鼠标离开时候消失，但鼠标移动到全部商品分类的时候，背景颜色不消失不消失！！！！------用事件委派，

用一个div包裹两个兄弟标签：添加鼠标离开事件@mouseleave=“leaveIndex”

      <!-- 事件委派 -->
      <div @mouseleave="leaveIndex">
        <h2 class="all">全部商品分类</h2>
        <div class="sort">
          <div class="all-sort-list2">
            <div
              class="item"
              v-for="(c1, index) in categoryList"
              :key="c1.categoryId"
              :class="{ cur: currentIndex == index }"
            >
              <h3 @mouseenter="changeIndex(index)" >
                <a href="">{{ c1.categoryName }}</a>
              </h3>
              ........................
        </div>
      </div>

1.2 二三级菜单显示

两种：
1.css

        &:hover {
            .item-list {
               display: block;
            }
        }

2.js

  <div class="item-list clearfix" :style="{display:currentIndex == index ?'block':'none'}">

1.3菜单三级联动防卡顿-节流

脚手架生成的项目中已有，直接引入

//全部引入
import _ from 'lodash';
//按需引入，因为是默认暴露的（module.exports = throttle;），所以不加 { throttle }大括号了
import  throttle  from "lodash/throttle";

    // es6写法，没法用节流
    // changeIndex(index) {
    //   this.currentIndex = index;
    // },

    // //用es5写法--全部引入
    // changeIndex:_.throttle(function(index){
    //   this.currentIndex = index;
    // },50),

    //用es5写法--按需引入(throttle别用箭头函数，可能出现上下文)
    changeIndex: throttle(function (index) {
      this.currentIndex = index;
    }, 50),

1.4 路由跳转—router-link出现的问题–用编程式导航

router-link进行路由跳转时，鼠标上下来回滑动，没有之前丝滑，会出现卡顿现象
原因：

第一种声明式导航:为什么使用router-link组件的时候，会出现卡顿那？
router-link是一个组件：相当于VueComponent类的实例对象，一瞬间
new VueComponent很多实例（1000+），很消耗内存，因此导致卡顿。

第二种编程式导航:push|replace
三级分类由于使用router-link的时候，会出现卡顿现象，因此采用编程式导航。

路由跳转的时候【home->search】：需要进行路由传递参数【分类的名字、一、二、三级分类的id】

this.$router.push()

{ 
 name:'search',
 query:{
    categoryName:'电子书',
    category2Id:4
 }
}

1.5 点击一二三级菜单-事件委派

给菜单的最外层添加点击事件,并添加自定义属性，一个判断是否是a标签，一个判断几级菜单

 <div class="all-sort-list2" @click="goSearch">
 
<a :data-categoryName="c1.categoryName"  :data-category1Id="c1.categoryId"  >{{ c1.categoryName }}</a  >

event.target.dataset

          <div class="all-sort-list2" @click="goSearch">
            <div
              class="item"
              v-for="(c1, index) in categoryList"
              :key="c1.categoryId"
              :class="{ cur: currentIndex == index }"
            >
              <h3 @mouseenter="changeIndex(index)">
                <!-- <router-link to="/search">{{ c1.categoryName }}</router-link> -->
                <a
                  :data-categoryName="c1.categoryName"
                  :data-category1Id="c1.categoryId"
                  >{{ c1.categoryName }}</a
                >
              </h3>
              <div
                class="item-list clearfix"
                :style="{ display: currentIndex == index ? 'block' : 'none' }"
              >
                <div
                  class="subitem"
                  v-for="(c2, index) in c1.categoryChild"
                  :key="c2.categoryId"
                >
                  <dl class="fore">
                    <dt>
                      <a
                        :data-categoryName="c2.categoryName"
                        :data-category2Id="c2.categoryId"
                        >{{ c2.categoryName }}</a
                      >
                    </dt>
                    <dd>
                      <em
                        v-for="(c3, index) in c2.categoryChild"
                        :key="c3.categoryId"
                      >
                        <a
                          :data-categoryName="c3.categoryName"
                          :data-category3Id="c3.categoryId"
                          >{{ c3.categoryName }}</a
                        >
                      </em>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>

    goSearch(event) {
      //事件委派+编程式导航
      let { category1id, category2id, category3id, categoryname } =
        event.target.dataset;

      //有a标签
      if (categoryname) {
        let location = { name: "search" };
        let query = { categoryName: categoryname };//注意大小写
        //判断几级
        if (category1id) {
          query.category1Id=category1id
        } else if (category2id) {
          query.category2Id=category2id
        } else {
          query.category3Id=category3id
        }
        //整理参数
        location.query=query
        //路由跳转
        this.$router.push(location)
      }
    },

注意：对象合并的操作

1.6 过渡动画

在Vue当中，你可以给 （某一个节点）|（某一个组件）添加过渡动画效果。但是需要注意，节点|组件务必出现v-if|v-show指令才可以使用。

//外层加transition ，
//没有name属性，样式v-enter v-enter-active v-enter-to v-leave v-leave-active v-leave-to；
//有name， 样式sort.enter....
<transition name="sort">
     <div class="sort" v-show="show">。。。。。。</div>
     </div>           
<transition>      

   .sort{....}

    // 过渡动画样式
    //开始状态-进入
    .sort-enter{
      height: 0px;
    }
    //结束状态-进入
    .sort-enter-to{
      height: 461px;
    }
    //定义动画事件，速率
    .sort-enter-active{
      transition: all .5s linear;
      overflow:hidden;//解决文字动画效果不同步问题
    }

注意：解决文字动画效果不同步问题：在 .sort-enter-active中添加 overflow:hidden;

1.7 切换组件优化（减少请求接口）

search和home都有菜单组件，每次切换都要请求接口，所以做下优化

放在入口文件APP.vue中：

  mounted(){
    //派发action--优化-放在这里只执行一次，获取菜单的信息（放在typeNav中，每次切换都请求接口）
    this.$store.dispatch("home/categoryList");
  },

1.8 Vue Router 的params和query传参的使用和区别

1、传参可以使用params和query两种方式。
2、使用params传参只能用name来引入路由，即push里面只能是name:’xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！。
3、使用query传参使用path来引入路由。
4、params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。
5、二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示。

参考：https://www.jianshu.com/p/f1e2266373b7

1.9 合并路由参数

分两种情况（菜单时query，搜索时params）
1.先点击菜单，再点搜索；

  //合并参数
      // if (this.$route.query) {//因为一直为真，所以不用if
        let location={  name: "search",params: { keyword: this.keyword }}
        location.query=this.$route.query
        this.$router.push(location); 
      // }

2.先搜索，再点击菜单

        //合并参数
        if (this.$route.params) {
          //整理参数
          location.query = query;
          location.params=this.$route.params
          //路由跳转
          this.$router.push(location);
        }