vue3学习日记8 - 一级分类

失宠的king2025-01-18 11:11

最近发现职场前端用的框架大多为vue，所以最近也跟着黑马程序员vue3的课程进行学习，以下是我的学习记录

视频网址：

Day2-17.Layout-Pinia优化重复请求_哔哩哔哩_bilibili

学习日记：

vue3学习日记1 - 环境搭建-CSDN博客

vue3学习日记2 - 组合式API基础学习-CSDN博客

vue3学习日记3 - 组合式API练习小案例-CSDN博客

vue3学习日记4 - Pinia-CSDN博客

vue3学习日记5 - 项目起步-CSDN博客

vue3学习日记6 - Layout-CSDN博客

vue3学习日记7 - Home页面-CSDN博客

一、整体认识和路由配置

1、想要实现效果，点击后跳转页面，后面根据id不同展示的页面数据不同

2、修改router文件夹下，index.js文件

3、修改LayoutHeader和LayoutFixed文件

4、运行截图

二、面包屑导航(路由传参)

1、想要实现的效果

点击居家，后面会显示居家，点击美食，后面会显示美食

2、修改以下文件夹下的文件

html 复制代码 
<script setup>
import {getCategoryAPI} from '@/apis/Category'
import { onMounted, ref } from 'vue'
// 引入useRoute
import { useRoute } from 'vue-router'
const categoryData = ref({})
const route = useRoute()
const getCategory = async () => {
    // 使用route.params.id获取路由传递的参数，并传给接口
    const res = await getCategoryAPI(route.params.id)
    categoryData.value = res.result
}
onMounted(()=>getCategory())
</script>
<template>
  <div class="top-category">
    <div class="container m-top-20">
      <!-- 面包屑 -->
      <div class="bread-container">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{
  
  { categoryData.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.top-category {
  h3 {
    font-size: 28px;
    color: #666;
    font-weight: normal;
    text-align: center;
    line-height: 100px;
  }

  .sub-list {
    margin-top: 20px;
    background-color: #fff;

    ul {
      display: flex;
      padding: 0 32px;
      flex-wrap: wrap;
      li {
        width: 168px;
        height: 160px;
        a {
          text-align: center;
          display: block;
          font-size: 16px;

          img {
            width: 100px;
            height: 100px;
          }

          p {
            line-height: 40px;
          }

          &:hover {
            color: $xtxColor;
          }
        }
      }
    }
  }

  .ref-goods {
    background-color: #fff;
    margin-top: 20px;
    position: relative;

    .head {
      .xtx-more {
        position: absolute;
        top: 20px;
        right: 20px;
      }

      .tag {
        text-align: center;
        color: #999;
        font-size: 20px;
        position: relative;
        top: -20px;
      }
    }

    .body {
      display: flex;
      justify-content: space-around;
      padding: 0 40px 30px;
    }
  }

  .bread-container {
    padding: 25px 0;
  }
}
</style>

3、在以下文件夹下建立新文件

javascript 复制代码 
// 导入
import request from '@/utils/http'
// 获取Category页面数据，传参为id
export const getCategoryAPI = (id) => {
    return request({
        url:'/category',
        params:{
            id
        }
    })
}

4、运行结果

三、实现Banner轮播图（默认参数，传入参数）

1、修改Home中访问轮播图接口(主页为1，商品页为2)

javascript 复制代码 
// params = {} : 默认传入的是空对象
export function getBannerAPI(params = {}){
    // 如果params中没有distributionSite的值默认是1，反之distributionSite的值为传入的值
    const { distributionSite = '1'} = params
    return httpInstance({
        url:'/home/banner',
        params:{
            distributionSite
        }
    })
}

2、修改Categorize的页面代码

html 复制代码 
<script setup>
import {getBannerAPI} from '@/apis/Home.js'
import {getCategoryAPI} from '@/apis/Category'
import { onMounted, ref } from 'vue'
/**
 * 面包屑
 */
// 引入useRoute
import { useRoute } from 'vue-router'
const categoryData = ref({})
const route = useRoute()
const getCategory = async () => {
    // 使用route.params.id获取路由传递的参数，并传给接口
    const res = await getCategoryAPI(route.params.id)
    categoryData.value = res.result
}
onMounted(()=>getCategory())

/**
 * banner轮播图
 */
// 设置响应式数据bannerList
const bannerList = ref([])
// 访问接口，将获取到的数据赋值给bannerList
const getBanner = async () => {
    const res = await getBannerAPI({
        distributionSite:'2'
    })
    bannerList.value = res.result
}
// 挂载时调用方法
onMounted(()=>getBanner())
</script>

<template>
  <div class="top-category">
    <div class="container m-top-20">
      <!-- 面包屑 -->
      <div class="bread-container">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{
  
  { categoryData.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 轮播图 -->
      <div class="home-banner">
        <el-carousel height="500px">
        <!-- 将接口返回的数据，渲染在页面上 -->
        <el-carousel-item v-for="item in bannerList" :key="item.id">
            <img :src="item.imgUrl" alt="">
        </el-carousel-item>
        </el-carousel>
      </div>

    </div>
  </div>
</template>


<style scoped lang="scss">
.top-category {
  h3 {
    font-size: 28px;
    color: #666;
    font-weight: normal;
    text-align: center;
    line-height: 100px;
  }

  .sub-list {
    margin-top: 20px;
    background-color: #fff;

    ul {
      display: flex;
      padding: 0 32px;
      flex-wrap: wrap;

      li {
        width: 168px;
        height: 160px;


        a {
          text-align: center;
          display: block;
          font-size: 16px;

          img {
            width: 100px;
            height: 100px;
          }

          p {
            line-height: 40px;
          }

          &:hover {
            color: $xtxColor;
          }
        }
      }
    }
  }

  .ref-goods {
    background-color: #fff;
    margin-top: 20px;
    position: relative;

    .head {
      .xtx-more {
        position: absolute;
        top: 20px;
        right: 20px;
      }

      .tag {
        text-align: center;
        color: #999;
        font-size: 20px;
        position: relative;
        top: -20px;
      }
    }

    .body {
      display: flex;
      justify-content: space-around;
      padding: 0 40px 30px;
    }
  }

  .bread-container {
    padding: 25px 0;
  }
}
.home-banner {
  width: 1240px;
  height: 500px;
  margin: 0 auto;
  img {
    width: 100%;
    height: 500px;
  }
}
</style>

3、运行截图

四、激活状态控制

1、发现问题

2、修改部分代码

使用RouteLink中的active-class属性即可实现

设置样式

3、运行截图

五、分类列表的实现

1、模板

html 复制代码 
<div class="sub-list">
  <h3>全部分类</h3>
  <ul>
    <li v-for="i in categoryData.children" :key="i.id">
      <RouterLink to="/">
        <img :src="i.picture" />
        <p>{
  
  { i.name }}</p>
      </RouterLink>
    </li>
  </ul>
</div>
<div class="ref-goods" v-for="item in categoryData.children" :key="item.id">
  <div class="head">
    <h3>- {
  
  { item.name }}-</h3>
  </div>
  <div class="body">
    <GoodsItem v-for="good in item.goods" :good="good" :key="good.id" />
  </div>
</div>

2、引入GoodItem

javascript 复制代码 
import GoodsItem from '@/views/Home/componments/GoodsItem.vue'

3、运行截图

六、路由缓存问题

1、发现问题

运行项目时可以发现，当点击"服饰"和"母婴"，页面并没有变化

这是因为当使用带有参数的路由时，相同的组件实例将被复用，使其更高效，但与此同时，组件的生命周期不会被调用，页面数据不会更新

2、解决思路

1、让组件实例不复用，强制销毁重建

可以用:key，：key常常与v-for联合使用，但是它也可以用于强制替换一个元素或者钩子

运行结果
缺点

存在性能问题，比如说，上面的Banner在每个板块都是一样的，但是一切换，就需要访问banner的接口，影响性能

2、监听路由变化，变化后执行数据更新操作

使用onBeforeRouteUpdate导航钩子

javascript 复制代码 
onBeforeRouteUpdate钩子函数可以在每次路由更新之前执行，在回调中执行需要数据更新的业务逻辑即可
修改Categorize文件夹下index.vue文件
运行结果

3、问题小结

1、路由缓存问题产生的原因是什么？

路由只有参数变换时，会复用组件实例，但是生命周期不调用

2、两种方案都可以解决路由缓存问题，如何选择呢？

可以根据自己的实际开发环境进行抉择 1、key方法：简单粗暴，不考虑性能问题 2、onBeforeRouteUpdate方法：可以精细化控制，在意性能问题时可使用

七、使用逻辑函数拆分业务

1、概念

基于逻辑函数拆分业务是指把同一个组件中独立的业务代码通过函数做封装处理，提升代码的可维护性

2、步骤

javascript 复制代码 
1、按照业务声明以"use"打头的逻辑函数 
2、把独立的业务逻辑封装到各个函数内部 
3、函数内部把组件中需要用到的数据或者方法return方法 
4、在组件中调用函数把数据或者方法组合回来使用

3、新建文件夹和文件

1、useBanner.js

javascript 复制代码 
/**
 * banner轮播图
 */
import {getBannerAPI} from '@/apis/Home.js'
import {ref,onMounted} from 'vue'
export function useBanner(){
    // 设置响应式数据bannerList
    const bannerList = ref([])
    // 访问接口，将获取到的数据赋值给bannerList
    const getBanner = async () => {
        const res = await getBannerAPI({
            distributionSite:'2'
        })
        bannerList.value = res.result
    }
    // 挂载时调用方法
    onMounted(()=>getBanner())

    return {
        bannerList
    }
}

2、useCategory.js

javascript 复制代码 
import {getCategoryAPI} from '@/apis/Category'
import { ref,onMounted } from 'vue'
import { onBeforeRouteUpdate } from 'vue-router'
// 引入useRoute
import { useRoute } from 'vue-router'
/**
 * 面包屑
 */
export function useCategory(){   
    const categoryData = ref({})
    const route = useRoute()
    // 默认id为route.params.id
    const getCategory = async (id = route.params.id) => {
        // 使用route.params.id获取路由传递的参数，并传给接口
        const res = await getCategoryAPI(id)
        categoryData.value = res.result
    }
    onMounted(()=>getCategory())

    // 路由发生变化时，可以将分类数据重新获取
    onBeforeRouteUpdate((to)=>{
        // 由于由于route.params.id获取到的参数具有一定的滞后性，所以通过"to"获取实时路由参数
        getCategory(to.params.id)
    })

    return {
        categoryData
    }
}

3、index.vue

javascript 复制代码 
<script setup>
// 引入js
import GoodsItem from '@/views/Home/componments/GoodsItem.vue'
import { useCategory } from '@/views/Categorize/composables/useCategory'
import {useBanner} from '@/views/Categorize/composables/useBanner'
const { bannerList } = useBanner()
const { categoryData } = useCategory()
</script>
相关推荐
隼玉8 分钟前
【STM32-学习笔记-7-】USART串口通信
笔记·stm32·学习
明月清了个风14 分钟前
数据结构与算法学习笔记----中国剩余定理
笔记·学习
哭哭啼39 分钟前
redis单机安装
前端·数据库·redis
羊小猪~~43 分钟前
深度学习基础--GRU学习笔记(李沐《动手学习深度学习》)
人工智能·rnn·深度学习·学习·机器学习·gru·lstm
modaoshi519911 小时前
uniapp 页面铺满屏幕
前端·javascript·uni-app
杨荧1 小时前
【开源免费】基于Vue和SpringBoot的夕阳红公寓管理系统（附论文）
前端·javascript·vue.js·spring boot·开源
小小弯_Shelby1 小时前
vue+arcgis api for js实现地图经纬网格显示
vue.js·arcgis
Mae_cpski1 小时前
【React学习笔记】第三章：React应用
笔记·学习·react.js
小玉起起1 小时前
npm介绍
前端·npm·node.js
不叫猫先生1 小时前
【React】函数组件底层渲染机制
前端·javascript·react.js
热门推荐
01Oracle Scheduler: Calendaring02Dell服务器升级ubuntu 22.04失败解决03半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)04(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明05密码学原理技术-第六章-introduction to pulibc-key cryptography06优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间07Oracle 高阶函数与高级功能详解08go下载依赖提示连接失败09渗透测试之SQLMAP工具详解 kali自带SQLmap解释 重点sqlmap --tamper 使用方式详解 搞完你就很nice了10JS设计模式之中介者模式