使用vue3+ts+vite从零开始搭建bolg(五):layout(持续更新中)

五、layout搭建

5.1静态搭建

在src下创建如图文件夹

这里用logo举例,在scripts里export

  <script lang="ts">export default {name: 'Logo',}</script>

然后在layout里引入

//引入左侧菜单顶部用户信息
import Logo from './logo/index.vue'

接着直接使用

<!-- 顶部用户信息 --><Logo class="logo"></Logo>

以此类推,完成layout的静态搭建

5.2动态菜单

首先按照上述方法引入菜单

<el-menutext-color="white"background-color="#001529":default-active="$route.path":collapse="LayOutSettingStore.fold ? true : false"><Menu class="menu"></Menu>
</el-menu>

然后把菜单放入userStore里

import { constantRoute } from '@/router/routes'state: () => {return {token: GET_TOKEN(),username: '',menuRoutes:constantRoute,}},

 再在Menu里,通过prop传到子组件


<Menu :menuList="userStore.menuRoutes" class="menu"></Menu>//引入用户相关的小仓库
import useUserStore from '../store/modules/user'
let userStore = useUserStore()

在menu的index.vue,定义并遍历

<template><div><template v-for="item in menuList" :key="item.path"></template></div>
</template>defineProps(['menuList'])
没有子路由

即路由表里没有子路由

<!--没有子路由--><template v-if="!item.children"><el-menu-itemv-if="!item.meta.hidden":index="item.path"@click="goRoute"><el-icon><component :is="item.meta.icon"></component></el-icon><template #title><span>{{ item.meta.title }}</span></template></el-menu-item></template>

页面跳转goRoute方法 

import { useRouter } from 'vue-router'let $router = useRouter()
const goRoute = (vc: any) => {$router.push(vc.index)
}
有子路由但是只有一个
<!-- 有子路由但是只有一个的 --><template v-if="item.children && item.children.length == 1"><el-menu-itemv-if="!item.children[0].meta.hidden":index="item.children[0].path"@click="goRoute"><el-icon><component :is="item.children[0].meta.icon"></component></el-icon><template #title><span>{{ item.children[0].meta.title }}</span></template></el-menu-item></template>
有子路由但是子路由大于一

采用递归的方法

      <el-sub-menu:index="item.path"v-if="item.children && item.children.length > 1"><template #title><el-icon><component :is="item.meta.icon"></component></el-icon><span>{{ item.meta.title }}</span></template><Menu :menuList="item.children"></Menu></el-sub-menu>

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

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

相关文章

java版数据结构:堆,大根堆,小根堆

目录 堆的基本概念&#xff1a; 如何将一个二叉树调整成一个大根堆&#xff1a; 转成大根堆的时间复杂度 根堆中的插入&#xff0c;取出数据&#xff1a; 堆的基本概念&#xff1a; 堆是一种特殊的树形数据结构&#xff0c;它满足以下两个性质&#xff1a; 堆是一个完全二叉…

【半夜学习MySQL】表结构的操作(含表的创建、修改、删除操作,及如何查看表结构)

&#x1f3e0;关于专栏&#xff1a;半夜学习MySQL专栏用于记录MySQL数据相关内容。 &#x1f3af;每天努力一点点&#xff0c;技术变化看得见 文章目录 创建表查看表结构修改表删除表 创建表 语法&#xff1a; create table table_name(field1 datatype,field2 datatype,fiel…

JWT令牌技术实现登录校验

一.简单登录功能 在登录界面中&#xff0c;我们可以输入用户的用户名以及密码&#xff0c;然后点击 "登录" 按钮就要请求服务器&#xff0c;服务端判断用户输入的用户名或者密码是否正确。如果正确&#xff0c;则返回成功结果&#xff0c;跳转至系统首页面。 1.功能…

局域网路由器 交换机 ap模式

目录 路由器和交换机的区别 ap模式&#xff1a; ap模式查找ip登录路由器 路由器和交换机的区别 交换机&#xff08;Switch&#xff09;和路由器&#xff08;Router&#xff09;是网络中常见的两种设备&#xff0c;它们都承担着数据传输的任务&#xff0c;但它们的工作原理和…

[笔试训练](二十二)064:添加字符065:数组变换066:装箱问题

目录 064:添加字符 065:数组变换 066:装箱问题 064:添加字符 添加字符_牛客笔试题_牛客网 (nowcoder.com) 题目&#xff1a; 题解&#xff1a; 枚举所有A&#xff0c;B字符串可能的对应位置&#xff0c;得出对应位置不同字符数量的最小情况 两字符串的字符数量差n-m&…

springboot月度员工绩效考核管理系统

摘要 本月度员工绩效考核管理系统采用java语言做为代码编写工具&#xff0c;采用mysql数据库进行系统中信息的存储与处理。框架采用springboot。 本系统的功能分为管理员和员工两个角色&#xff0c;管理员的功能有&#xff1a; &#xff08;1&#xff09;个人中心管理功能&am…

微信小程序使用过程注意事项

整个页面的样式设置&#xff1f; 全局页面和单个页面设置整个页面的样式时都可以通过 page标签选择器来设置。 page {background:red; }给轮播图swiper设置圆角&#xff0c;使用border-radius:10rpx;不生效? 需要再加上overflow:hidden. swiper {border-radius: 10rpx;overflo…

“Linux”目录结构and配置网络

了解完命令格式和vi、vim编辑器后&#xff0c;我们来认识一下目录的结构&#xff1a; 一、目录 &#xff08;1&#xff09;目录的特点 windows特点&#xff1a; Windows中有C、D、E盘&#xff0c;每个都是一个根系统 Linux特点&#xff1a; linux中只有一个根&#xff08;单…

冯喜运:5.14黄金大幅度修正?原油价格下跌成拖累?

【黄金消息面分析】&#xff1a;本周重要的美国数据的发布可能会对美元以及黄金产生重大影响。周四将公布更多经济指标&#xff0c;包括新屋开工和许可证、费城联储指数、工业生产数据和每周初请失业金人数。对于黄金而言&#xff0c;人们的注意力集中在经济和劳动力市场疲软对…

B/S和C/S框架

一、B/S框架 B/S框架是指Browser/Server框架&#xff0c;即基于浏览器和服务器的应用程序开发框架。在B/S架构中&#xff0c;用户通过浏览器&#xff08;Browser&#xff09;访问服务器&#xff08;Server&#xff09;上的应用程序或网站&#xff0c;而无需在用户端安装额外的客…

【Python】理解分类变量和连续变量

凡是血肉的东西都难与灵魂一样高扬。 在数据分析和建模过程中&#xff0c;变量可以分为不同的类型&#xff0c;其中最常见的两种类型是分类变量和连续变量。理解这两种变量类型及其处理方法对于数据分析和建模的成功至关重要。本文将介绍分类变量和连续变…

DRF 纯净版创建使用

【一】介绍 &#xff08;1&#xff09;使用原因 在Django中&#xff0c;contrib 包包含了许多内置的app和中间件&#xff0c;如auth、sessions、admin等&#xff0c;这些app在创建新的Django项目时默认是包含在内的。然而&#xff0c;在开发RESTful API时&#xff0c;可能不需…

jenkis

文章目录 安装插件配置构建超时自动停止 安装插件 在线安装&#xff1a;安装jenkins后&#xff0c;初次启动的时候安装插件 在线安装&#xff1a;插件管理&#xff0c;可选插件中 离线安装&#xff1a;下载插件(.hpi格式) 使用该方法安装插件每次只能安装一个插件&#xff0c;…

基于RTL8710BN与天猫精灵的WIFI智能家居方案

0 项目简介 目的&#xff1a; 语音控制智能家居产品 基于阿里云的物联网产品 基于WiFi技术的嵌入式产品 主要技术&#xff1a; WiFi技术 常用的物联网协议 网络编程 云平台配置 MCU OPENSDK开发 阿里物联网操作系统 硬件&#xff1a; wifi开发板RTL8710BN 天猫精灵…

大数据可视化实验(五):Tableau数据可视化

目录 一、实验目的... 1 二、实验环境... 1 三、实验内容... 1 1&#xff09;打开数据源... 1 2&#xff09;进入工作簿... 2 3&#xff09;字段设置... 2 4&#xff09;数据筛选... 3 5&#xff09;绘制条形图... 3 四、思考问题... 4 五、总结与心得体会... 4 一、…

深入理解Qt的信号与槽机制

目录标题 第 1 部分&#xff1a;信号与槽概述1.1 信号与槽的定义1.2 信号与槽的优势 第 2 部分&#xff1a;使用信号与槽2.1 声明信号与槽2.2 定义信号与槽2.3 连接信号与槽2.4 发出信号 第 3 部分&#xff1a;信号与槽的高级用法3.1 自动连接1. 使用 QMetaObject::Connection …

5月14(信息差)

&#x1f30d;字节携港大南大升级 LLaVA-NeXT&#xff1a;借 LLaMA-3 和 Qwen-1.5 脱胎换骨&#xff0c;轻松追平 GPT-4V Demo 链接&#xff1a;https://llava-next.lmms-lab.com/ &#x1f384;阿里巴巴开源的15个顶级Java项目 ✨ 欧洲在线订餐服务Takeaway.com&#xff1a…

NLP(15)-序列标注任务

前言 仅记录学习过程&#xff0c;有问题欢迎讨论 什么时候应该使用Pooling层&#xff1a; 如果针对每个字做标注&#xff0c;无需&#xff1b;若是针对整句话做分类&#xff0c;则需要pooling NER&#xff08;数据标注&#xff09;&#xff1a;B/M/E (A/O/P) --左/中/右 边界…

JavaScript中带日期的操作

当我们把日期转换为Number类型的时候&#xff0c;就会变成时间戳&#xff08;毫秒&#xff09; const future new Date(2037, 10, 19, 15, 23); console.log(Number(future)); // console.log(future); //与上行代码等效● 所以我们就可以利用时间戳去做点东西&#xff0c;例…

GPT-4o:融合文本、音频和图像的全方位人机交互体验

引言&#xff1a; GPT-4o&#xff08;“o”代表“omni”&#xff09;的问世标志着人机交互领域的一次重要突破。它不仅接受文本、音频和图像的任意组合作为输入&#xff0c;还能生成文本、音频和图像输出的任意组合。这一全新的模型不仅在响应速度上达到了惊人的水平&#xff0…