第74讲Breadcrumb 面包屑实现

Breadcrumb 面包屑实现

为了实现二级路由,我们搞成搞个子路由,对于二级菜单

const routes = [{path: '/',name: '首页',component: () => import('../views/layout'),redirect:'/home',children:[{path: '/home',name: '首页',component: () => import('../views/home/index')},{path: '/bigType',name: '商品大类',component: () => import('../views/bigType/index')}]},{path: '/login',name: 'login',component: () => import('../views/login')}
]

views/layout/header/breadcrumb.vue

<template><el-breadcrumb separator="/"><el-breadcrumb-item v-for="(item,index) in breadcrumbList" :key="index"><span class="no-redirect" v-if="index==breadcrumbList.length-1">{{item.name}}</span><span class="redirect" v-else @click="handleRedirect(item.path)">{{item.name}}</span></el-breadcrumb-item></el-breadcrumb>
</template><script setup>
import {ref, watch} from 'vue'
import { useRoute,useRouter } from 'vue-router'
const route=useRoute();
const router=useRouter();
console.log(route.matched)const breadcrumbList=ref([]);const handleRedirect=(path)=>{router.push(path)
}const initBreadcrumbList=()=>{breadcrumbList.value=route.matched;
}watch(route,()=>{initBreadcrumbList();
},{deep:true,immediate:true})</script><style lang="scss" scoped>
.no-redirect{cursor:text;
}
.redirect{color:#666;font-weight:600;cursor:pointer;&:hover{color:#304156}
}
</style>

layout index.vue修改:

<template><div class="app-wrapper"><el-container><el-aside width="200px" class="sidebar-container"><Menu/></el-aside><el-container><el-header><div class="navbar"><Breadcrumb/></div></el-header><el-main><router-view/></el-main></el-container></el-container></div>
</template><script setup>
import Menu from '@/views/layout/menu'
import Breadcrumb from '@/views/layout/header/breadcrumb'
</script><style lang="scss" scoped>.app-wrapper {position: relative;width: 100%;height: 100%;
}.navbar {width: 100%;height: 60px;overflow: hidden;background-color: #fff;box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);padding: 0 16px;display: flex;align-items: center;box-sizing: border-box;position: relative;
}:deep(.el-header){padding: 0px;
}.sidebar-container {background-color: #2d3a4b;height: 100%;
}:deep(.el-container){height: 100%;
}</style>

在这里插入图片描述
views/home/index.vue

<template>后台管理首页
</template><script>
export default {name: "index"
}
</script><style scoped></style>

views/bigType/index

<template>
商品大类
</template><script>
export default {name: "index"
}
</script><style scoped></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/679257.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《UE5_C++多人TPS完整教程》学习笔记10 ——《P11 设置加入游戏会话(Setup for Joining Sessions)》

本文为B站系列教学视频 《UE5_C多人TPS完整教程》 —— 《P11 设置加入游戏会话&#xff08;Setup for Joining Sessions&#xff09;》 的学习笔记&#xff0c;该系列教学视频为 Udemy 课程 《Unreal Engine 5 C Multiplayer Shooter》 的中文字幕翻译版&#xff0c;UP主&…

JVM-类加载器 双亲委派机制

申明&#xff1a;文章内容是本人学习极客时间课程所写&#xff0c;文字和图片基本来源于课程资料&#xff0c;在某些地方会插入一点自己的理解&#xff0c;未用于商业用途&#xff0c;侵删。 什么是JVM JVM是Java Virtual Machine&#xff08;Java虚拟机&#xff09;的缩写&a…

c语言数据类型定义错误导致的数据溢出或者死循环

数据溢出问题 #include <stdio.h>/* 数据溢出 */int main() {char i; // 数据表示范围[-128,127] 0xf0 ~ 0x7ffor(i0;i<130;i) // {printf("%d ",i);}return 0; }/* 编译运行上面的程序&#xff0c;你会发现程序陷入了死循环&#xff0c;一直在不断…

第5个-模糊加载

Day 5 - Blurry Loading 1. 项目展示 2. 分析思路 变化过程 数字从 0 不断增长到 100&#xff1b;中间的百分比数字逐渐消失&#xff0c;即透明度 opacity 从 1 到 0&#xff1b;背景图片从模糊变为清晰&#xff0c;滤镜 filter.blur()的参数设置为从 30px 到 0px。 小 tips…

unity学习案例总结

动态标签 GitHub - SarahMit/DynamicLabel3D: Simple dynamic labels for a 3D Unity scene

《CSS 简易速速上手小册》第6章:高级 CSS 技巧(2024 最新版)

文章目录 6.1 使用 CSS 变量进行设计&#xff1a;魔法配方的调配6.1.1 基础知识6.1.2 重点案例&#xff1a;创建可定制的主题6.1.3 拓展案例 1&#xff1a;响应式字体大小6.1.4 拓展案例 2&#xff1a;使用 CSS 变量创建动态阴影效果 6.2 calc(), min(), max() 等函数的应用&am…

【CTFshow】VIP题目限免 通关

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏…

我主编的电子技术实验手册(03)——电阻的识别与测量

本专栏是笔者主编教材&#xff08;图0所示&#xff09;的电子版&#xff0c;依托简易的元器件和仪表安排了30多个实验&#xff0c;主要面向经费不太充足的中高职院校。每个实验都安排了必不可少的【预习知识】&#xff0c;精心设计的【实验步骤】&#xff0c;全面丰富的【思考习…

AI大模型学习笔记之四:生成式人工智能(AIGC)是如何工作的?

OpenAI 发布 ChatGPT 已经1年多了&#xff0c;生成式人工智能&#xff08;AIGC&#xff09;也已经广为人知&#xff0c;我们常常津津乐道于 ChatGPT 和 Claude 这样的人工智能系统能够神奇地生成文本与我们对话&#xff0c;并且能够记忆上下文情境。 Midjunery和DALLE 这样的AI…

随机过程及应用学习笔记(一)概率论(概要)

概率是随机的基础&#xff0c;在【概率论&#xff08;概要&#xff09;】这个部分中仅记录学习随机过程及应用的基本定义和结果。 前言 首先&#xff0c;概率论研究的基础是概率空间。概率空间由一个样本空间和一个概率测度组成&#xff0c;样本空间包含了所有可能的结果&…

服务器解析漏洞及任意文件下载

1.服务器文件解析漏洞 文件解析漏洞,是指Web容器&#xff08;Apache、nginx、iis等&#xff09;在解析文件时出现了漏洞,以其他格式执行出脚本格式的效果。从而,黑客可以利用该漏洞实现非法文件的解析。 &#xff08;1) Apache linux系统中的apache的php配置文件在/etc/apac…

【数据结构】顺序栈和链式栈的简单实现和解析(C语言版)

数据结构——栈的简单解析和实现 一、概念二、入栈&#xff08;push&#xff09;三、出栈&#xff08;pop&#xff09;四、顺序栈简单实现 &#xff08;1&#xff09;进栈操作&#xff08;2&#xff09;出栈操作 一、概念 本篇所讲解的栈和队列属于逻辑结构上的划分。逻辑结构…

综合项目---博客

一.运行环境 192.168.32.132 Server-Web linux Web 192.168.32.133 Server-NFS-DNS linux NFS/DNS 基础配置 1.配置主机名静态ip 2.开启防火墙并配置 3.部分开启selinux并配置 4.服务器之间通过阿里云进行时间同步 5.服务器之间实现ssh免密…

SpringCloud-Ribbon:负载均衡(基于客户端)

6. Ribbon&#xff1a;负载均衡(基于客户端) 6.1 负载均衡以及Ribbon Ribbon是什么&#xff1f; Spring Cloud Ribbon 是基于Netflix Ribbon 实现的一套客户端负载均衡的工具。简单的说&#xff0c;Ribbon 是 Netflix 发布的开源项目&#xff0c;主要功能是提供客户端的软件负…

MMKV:轻巧高效的跨平台键值存储解决方案

MMKV&#xff1a;轻巧高效的跨平台键值存储解决方案 引言 在移动应用的开发中&#xff0c;数据存储是一个至关重要的环节。随着移动应用的普及和功能的增多&#xff0c;应用需要存储和管理各种类型的数据&#xff0c;包括用户配置信息、缓存数据、临时状态等。传统的数据存储…

python巧用定理判断素数

目录 判断一个数n是否是素数 求一个数的素因数个数 求大于等于指定数的最小素数 在数论中有三个非常重要的关于素数的定理 1、任何数都可以表示成若干个素数的乘积 2、任意数的一个素因子如果小于根号n&#xff0c;那么另一个与其对应的素因子必然大于根号n。 3、除了2和…

浅谈应该遵守的伦敦银交易规则

做伦敦银投资的朋友应遵守伦敦银交易规则&#xff0c;伦敦银交易规则不是指那些伦敦银交易技巧&#xff0c;而是在这个市场中要遵循的一些约定&#xff0c;下面我们就来讨论一下。 风险管理。风险管理即指投资者控制自己一笔乃至整体交易的风险&#xff0c;没有风险管理意识的投…

JavaSE——方法(1/2)-介绍、方法的各种形式、使用的要求

目录 方法的介绍 方法的其他形式 方法使用的要求 方法的介绍 方法是什么 方法是一种语法结构&#xff0c;它可以把一段代码封装成一个功能&#xff0c;以便重复调用。 方法的完整格式 修饰符 返回值类型 方法名 ( 形参列表 ) { 方法体代码(需要执行的功能代码) return…

OpenCV-36 多边形逼近与凸包

目录 一、多边形的逼近 二、凸包 一、多边形的逼近 findContours后的轮廓信息countours可能过于复杂不平滑&#xff0c;可以用approxPolyDP函数对该多边形曲线做适当近似&#xff0c;这就是轮廓的多边形逼近。 apporxPolyDP就是以多边形去逼近轮廓&#xff0c;采用的是Doug…

面试经典150题——三数之和

​"The road to success and the road to failure are almost exactly the same." - Colin R. Davis 1. 题目描述 2. 题目分析与解析 2.1 思路一——暴力方法 因为三个数相加为0&#xff0c;那么说明其中两个加数的和与另一个加数为相反数则满足题意。所以可以得到…