Vue3电商项目实战-分类模块3【06-顶级类目-分类商品-展示、07-顶级类目-面包屑切换动画、08-二级类目-处理跳转细节】

---

06-顶级类目-分类商品-展示

根据切换路由的时候，根据分类ID获取数据，渲染分类商品。

大致步骤：

• 定义API，组件初始化要去加载数据，但是动态路由不会重新初始化组件。
• 如果监听地址栏id的变化，然后变化了就去加载数据，但是初始化有不会加载了。
• 不过watch提供了 immediate: true 可让watch初始化的时候主动触发一次。

落的代码：

1.定义API src/api/category.js

/**
 * 获取单个顶级分类信息
 * @param {String} id - 顶级分类ID
 */
export const findTopCategory = (id) => {
  return request('/category', 'get', { id })
}

2.使用watch加载数据 src/views/category/index.vue

    // 推荐商品
    const subList = ref([])
    const getSubList = () => {
      findTopCategory(route.params.id).then(data => {
        subList.value = data.result.children
      })
    }
    watch(() => route.params.id, (newVal) => {
      newVal && getSubList()
    }, { immediate: true })

    return {
      sliders,
      topCategory,
      subList
    }

3.开始渲染 src/views/category/index.vue

      <!-- 分类关联商品 -->
      <div class="ref-goods" v-for="item in subList" :key="item.id">
        <div class="head">
          <h3>- {{item.name}} -</h3>
          <p class="tag">{{item.desc}}</p>
          <XtxMore />
        </div>
        <div class="body">
          <GoodsItem v-for="g in item.goods" :key="g.id" :goods="g" />
        </div>
      </div>

4.开始渲染 src/views/category/components/goods-item.vue

<template>
  <RouterLink to="/" class='category-goods'>
    <img :src="goods.picture" alt="">
    <p class="name ellipsis">{{goods.name}}</p>
    <p class="desc ellipsis">{{goods.tag}}</p>
    <p class="price">&yen;{{goods.price}}</p>
  </RouterLink>
</template>

<script>
export default {
  name: 'CategoryGoods',
  props: {
    goods: {
      type: Object,
      default: () => {}
    }
  }
}
</script>    

07-顶级类目-面包屑切换动画

目的： 由于切换顶级类目，面包屑文字瞬间完成，体验差，给切换的文字加上动画。

大致步骤：

• 给面包屑ITEM组件加上Transition组件并且创建 动画条件
• 定义动画css样式

落地代码：

• 加transition和name属性，以及加上key属性关联ID才会创建和移除。

        <transition name="fade-right" mode="out-in">
          <XtxBreadItem :key="currCategory.id">{{currCategory.name}}</XtxBreadItem>
        </transition>

• 写动画样式 common.less 做为公用

.fade-right-enter-to,
.fade-right-leave-from{
  opacity: 1;
  transform: none;
}
.fade-right-enter-active,
.fade-right-leave-active{
  transition: all .5s;
}
.fade-right-enter-from,
.fade-right-leave-to{
  opacity: 0;
  transform: translate3d(20px,0,0);
}

总结： 不同的key可以创建移除元素，创造触发动画条件。

08-二级类目-处理跳转细节

目的： 在路由跳转的时候，优化跳转的细节。

大致需求：

• 现在的路由跳转默认在当前浏览的位置（卷曲的高度），我们需要会到顶部。
• 在点击二级类目的时候，页面滚动到顶部，造成进入一级类名事件触发，显示其对应二级弹窗，需要处理。
• 切换到二级类目路由的时候也有ID，但是也触发了watch导致发送了请求，需要处理。

落的代码：

• 每次切换路由的时候滚动到顶部 src/router/index.js

const router = createRouter({
  history: createWebHashHistory(),
  routes,
+  scrollBehavior () {
+    return { left: 0, top: 0 }
+  }
})

• 滚动到顶部，鼠标有时候会进入一级类目上，触发弹出二级类目。改成在一级类目上移动弹出二级类目。src/components/app-header-nav.vue

    <li class="home"><RouterLink to="/">首页</RouterLink></li>
+    <li @mousemove="show(item)"

• 切换到二级类目路由的时候也有ID，但是也触发了watch导致发送了请求，需要处理。 src/views/category/index.vue

    watch(() => route.params.id, (newVal) => {
-      newVal && getSubList()
+      if (newVal && `/category/${newVal}` === route.path) getSubList()
    }, { immediate: true })

总结： 跳转的时候需要注意些细节