前端项目，个人笔记（五）【图片懒加载 + 路由配置 + 面包屑 + 路由行为修改】

目录

1、图片懒加载

步骤一：自定义全局指令

步骤二：代码中使用

​编辑步骤三：效果查看

步骤四：代码优化

2、封装组件案例-传对象

3、路由配置——tab标签

4、根据tab标签添加面包屑

4.1、实现

4.2、bug：需要手动刷新

4.3、解决方案一

4.4、方案优化：onBeforeRouteUpdate钩子函数

5、修改路由行为

---

1、图片懒加载

步骤一：自定义全局指令

重构main.js文件：

app.directive('img-lazy',{//el:指令绑定元素 img//binding:binding.value 指令=后面表达式的值 图片urlmounted(el,binding){        //console.log(el,binding.value)const { stop } = useIntersectionObserver(el,([{ isIntersecting }]) => {console.log(isIntersecting)if(isIntersecting){el.src = binding.value;stop();}})}
})

代码解释:

1.  app.directive('img-lazy', { ... })：在 Vue 应用中定义一个名为 v-img-lazy 的全局指令。

2. mounted(el, binding) { ... }：这是指令的 mounted 钩子函数，它在被绑定的元素插入到父节点时调用。

   • el：指令所绑定的元素，在这里是一个 img 标签。
   • binding：一个对象，包含了很多属性，其中 binding.value 是指令等号后面的值，这里是图片的 URL。

3. const { stop } = useIntersectionObserver(el, callback)：使用@vueuse/core的

   API - useIntersectionObserver 函数来观察 el 元素是否进入视口。

   1. el：要观察的 DOM 元素。
   2. callback：一个回调函数，当元素与视口有交集时调用。
   3. stop：一个函数，用于停止观察。

4. ([{ isIntersecting }]) => { ... }：这是 useIntersectionObserver 的回调函数。

   1. isIntersecting：一个布尔值，表示元素是否进入视口。

5. if(isIntersecting) { ... }：如果 isIntersecting 为 true，说明图片进入了视口。

   • el.src = binding.value;：设置图片元素的 src 属性为指令的值（图片的 URL），从而开始加载图片。
   • stop();：停止观察，因为图片已经加载，不需要再观察其是否进入视口。

步骤二：代码中使用

<img v-img-lazy="item.picture" alt="">

步骤三：效果查看

步骤四：代码优化

把这些代码都写在main.js中，main.js中的内容，太过于杂乱了些，我们整理一下，在根目录下创建directives/index.js：

import { useIntersectionObserver } from '@vueuse/core'export const lazyPlugin = {install (app) {// 懒加载指令逻辑app.directive('img-lazy', {mounted (el, binding) {// el: 指令绑定的那个元素 img// binding: binding.value  指令等于号后面绑定的表达式的值  图片urlconsole.log(el, binding.value)const { stop } = useIntersectionObserver(el,([{ isIntersecting }]) => {console.log(isIntersecting)if (isIntersecting) {// 进入视口区域el.src = binding.valuestop()}},)}})}
}

main.js中：

---

2、封装组件案例-传对象

        向组件传值的另一个案例-传普通值，在本系列文章：前端项目，个人笔记（二）【Vue-cli - 引入阿里矢量库图标 + 吸顶交互 + setup语法糖】

       调用的地方:

很明显，我们是有一个GoodItem组件，并且我们直接把good的这个对象传过去了

GoodItem组件代码：

<script setup>
defineProps({good: {type: Object,default: () => { }}
})
</script><template><RouterLink to="/" class="goods-item"><img v-img-lazy="good.picture" alt="" /><p class="name ellipsis">{{ good.name }}</p><p class="desc ellipsis">{{ good.desc }}</p><p class="price">&yen;{{ good.price }}</p></RouterLink>
</template><style scoped lang="scss">
.goods-item {display: block;width: 220px;padding: 20px 30px;text-align: center;transition: all .5s;&:hover {transform: translate3d(0, -3px, 0);box-shadow: 0 3px 8px rgb(0 0 0 / 20%);}img {width: 160px;height: 160px;}p {padding-top: 10px;}.name {font-size: 16px;}.desc {color: #999;height: 29px;}.price {color: $priceColor;font-size: 20px;}
}
</style>

可以重点看一下，是如何接收父组件传来的对象的·~

---

3、路由配置——tab标签

路由配置:

效果:

---

4、根据tab标签添加面包屑

4.1、实现

效果:

这个值的获取，是根据url中的id查询到tab的name的，因此第一步，我们需要封装一个查询请求：

api/category.js：

import http from "@/utils/http";/*** @description: 根据id获得一级分类对象信息* @param {*} id 分类id* @return {*}*/
export function getTopCategoryAPI(id){return http.get('/category',{params:{id}});
}

使用:  Category/index.vue:

<script setup>
import {getTopCategoryAPI} from '@/api/category'
import {useRoute} from "vue-router";
import {onMounted, onUpdated, ref} from "vue";const categoryData = ref({})
const route = useRoute()
const getCategory = async () => {// 如何在setup中获取路由参数 useRoute() -> route 等价于this.$route//console.log(route.params.id);const res = await getTopCategoryAPI(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>

重点代码：

4.2、bug：需要手动刷新

bug原因：当你在同一个组件内点击时，他会复用之前的组件 ，所以就不会刷新了，需要手动刷新~

4.3、解决方案一

 在路由入口处处理：

<RouterView :key="$route.fullPath"/>

方案：将路由入口中的所有组件全部都会重新加载~ 而我们只需要对应的组件刷新即可，因此就有了方案优化：

4.4、方案优化：onBeforeRouteUpdate钩子函数

onBeforeRouteUpdate((to)=>{getCategory(to.params.id)
})

 

---

5、修改路由行为

        我们会发现当我们在首页时，右侧滚动条可能是在中间，当我们切到美食时，滚动条还是在中间，没有跳到最上面。处理：

scrollBehavior(){return{top:0}
}