Category页面_caregcry页-优快云博客

本文链接：https://blog.youkuaiyun.com/Gwy001/article/details/144587872

一、相关文件的创建

1、api接口文件的创建

在 src/apis 目录下创建category.js 文件

2、category页面index.vue的创建

在 src/views 下新建Category/index.vue 文件

二、API文件的编写

在 src/apis/category.js 文件中编写category接口

import httpInstantce from "@/utils/http";

export function getCategoryAPI(id){

    return httpInstantce({

        url:'/category',

        params:{id}

    })
}

请求参数

第一个id请求需要的参数
第二个id是传入的参数

三、router的更改

category页面时更的id来进行页面的重定向，所以要更改category的router

要在children里面改

import { createRouter, createWebHistory } from 'vue-router'
// import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name:'layout',
      component:() => import('../views/Layout/index.vue'),
      children:[
        {
          path:'',
          component:() => import('../views/Home/index.vue'),
        },
        {

//更改category的路由为动态路由
          path:'/category/:id',
          component:() => import('../views/Category/index.vue')
        }
      ]
    },
    {
      path: '/login',
      name:'login',
      component:() => import('../views/Login/index.vue')
    }
  ],
})

export default router

四、index.vue文件的编写

1、script部分

<script setup>

//相关组件的导入
import { getCategoryAPI } from '@/apis/caregory'
import { ref ,watchEffect} from 'vue';
import { useRoute } from 'vue-router';
import GoodsItem from '../Home/components/GoodsItem.vue';


//定义响应式数据：
//const categoryData = ref({})：使用ref创建一个响应式对象categoryData，初始值为空对象。这个 //对象将用于存储从API获取的分类数据。
const route = useRoute()

const categoryData = ref({})

const getCategory = (() => {

  getCategoryAPI(route.params.id).then(res => {

    console.log(res);

    categoryData.value = res.data.result

    console.log(categoryData);

  })

})

//使用watchEffect来观察组件内部的响应式状态变化
watchEffect(() => {

  getCategory()


})

</script>

watchEffect：

简单来说，watchEffect 是 Vue3 中的一个响应式 API，它允许您监听响应式状态的变化，并在其发生变化时触发副作用函数。这个特性非常有用，在我们需要对响应式数据进行操作的时候，我们可以在监听到变化后马上做出反应。

watchEffect接收一个回调函数作为参数，该回调函数内部可以编写任何代码。如果回调函数中用到了响应式数据，那么当这些数据发生变化时，回调函数就会重新执行。与watch不同的是，watchEffect不需要显式指定要监听的数据，而是会自动收集其执行过程中访问到的响应式依赖，并在这些依赖发生变化时重新运行副作用函数。

特点：

自动依赖收集：当你调用watchEffect时，Vue会自动追踪你在副作用函数中访问的所有响应式数据。一旦这些数据发生变化，副作用函数会自动重新执行。
立即执行：与watch不同，watchEffect在创建时会立即执行一次副作用函数，以捕获初始状态。这类似于do-while和while循环的区别，即watchEffect会在一开始就执行一次。
响应式清理：如果副作用函数返回一个函数，那么这个返回的函数会在组件卸载或重新渲染时作为清理函数被调用。这可以用于清理副作用，如取消定时器或解绑事件监听器。
停止观察：watchEffect返回一个停止观察的函数，你可以调用这个函数来停止副作用的执行和依赖的收集。

2、template部分

1）、面包屑部分

   <!-- 面包屑 -->

      <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>

效果如下：

注：面包屑

页面面包屑（Breadcrumb Navigation）是网站导航中的一种可视化路径提示，通常以层次结构显示用户当前页面的位置，帮助用户了解他们在网站上的位置和浏览历史

面包屑主要有以下几种类型：

基于层次的面包屑：这是最常用的一种类型，可以向访问者指明网站的位置，并提供返回主页的链接。例如，“Home > Courses > SEO for Beginners”。
基于属性的面包屑：这通常用于电子商务网站，以显示用户点击了哪些属性。例如，“Home > Clothes > Winter > Men”。
基于历史的面包屑：显示用户访问过的网站其他页面，类似于浏览器历史记录。例如，如果用户是在寻找SEO新闻并阅读了三篇文章，面包屑可能是这样的：“Home > News1 > News2 > Current page”。

面包屑在网站导航和用户体验中发挥着重要作用，具有以下优势：

增强用户体验：面包屑提供了一条清晰的导航路径，让用户了解自己在网站中的当前位置。这通过简化导航来增强用户体验，并鼓励用户深入探索网站。
提高搜索引擎的理解能力：面包屑可作为结构化数据标记，为搜索引擎提供有关网站内容组织和页面之间层次关系的宝贵信息。这有助于搜索引擎更好地理解网站内容并编制索引，从而提高网站在搜索结果中的可见度。
增强内部链接：面包屑可充当内部链接，连接网站上的相关页面。这些内部链接可增强网站的整体链接结构并传播链接权益，对搜索引擎优化和排名产生有利影响。
降低跳出率：面包屑可以有效降低跳出率，通过提供清晰简单的导航，提高用户的参与度，减少直接跳出。
改善移动体验：在屏幕空间有限的移动设备上，面包屑尤其有价值。它们提供了一种便捷的导航方式，用户无需向上滚动主导航即可访问更深的页面。

2）、商品列表

      <!-- 商品列表 -->
      <div class="sub-list">

        <h3>全部分类</h3>

        <ul>

//根据数组id渲染数组
          <li v-for="item in categoryData.children" :key="item.id">

//重定向到主页            
            <RouterLink to="/">

              <img :src="item.picture"/>

//商品名称
              <p>{{ item.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">

          <goods-item v-for="i in item.goods" :key="i.id" :i="i"></goods-item>

        </div>

      </div>

3、style部分

样式部分组要用scss进行设计，可以根据自己的喜好更改样式，这里提供一种样式

<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>