当前位置：首页 > news >正文

前端路由layout布局处理以及菜单交互(三)

news 来源：原创 2025/7/12 20:41:35

上篇介绍了前端项目部署以及基本依赖的应用，这次主要对于路由以及布局进行模块化处理

一、创建layout模块

在这里插入图片描述

1、新建src/layout/index.vue

<template><el-container class="common-layout"><!-- <el-aside class="aside"><Aside/></el-aside> --><el-container><el-header class="header"><Header/></el-header><el-main class="main"><router-view></router-view></el-main><el-footer class="footer">Copyright © 2020 云风网, All rights reserved. 京ICP备20002789号-1</el-footer></el-container></el-container>
</template><script setup lang="ts">
// import Aside from './components/aside.vue'
import Header from './components/header.vue'</script><style lang="scss" scoped>
@import '@/assets/styles/mixins.scss';
.common-layout{width: 100%;height: 100vh;.aside{height: 100vh;width: 200px;}.header{height: 60px;padding: 0;}.main{@include scrollBar;}.footer{height: 60px;background-color: #343a40;color: #fff;line-height: 60px;}
}</style>

2、新建头部组件src/layout/components/header.vue

<template><el-menu:default-active="activeIndex"class="header-container"mode="horizontal":ellipsis="false"@select="handleSelect"><el-menu-item index="0"><imgclass="logo"src="@/assets/logo.svg"alt="logo"/></el-menu-item><navbar-itemv-for="(route, index) in routerList":key="route.path + index":item="route":base-path="route.path":is-nest="false"/></el-menu>
</template><script setup lang="ts">
import NavbarItem from './navbarItem.vue';
import { useRouter} from 'vue-router';
const router = useRouter();const activeIndex = ref('1')
const routerList = router.getRoutes();
console.log('routerList',routerList);
const handleSelect = (key: string, keyPath: string[]) => {console.log(key, keyPath)
}
</script><style lang="scss" scoped>
.el-menu--horizontal > .el-menu-item:nth-child(1) {margin-right: auto;
}
.header-container{height: 100%;padding: 0 50px;background-color: #fff;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);.logo{width: 40px;}
}
</style>

3、新建菜单组件src/layout/components/navbarItem.vue

<template><div v-if="!item.hidden"><template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren)"><app-link v-if="onlyOneChild.meta.title" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)"><el-menu-item :index="resolvePath(onlyOneChild.path,'')" @click="handleClick(item.path)"><svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" /><template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template></el-menu-item></app-link></template><el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path,'')" teleported><template v-if="item.meta" #title><svg-icon :icon-class="item.meta && item.meta.icon" /><span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span></template><app-link v-for="child in item.children" :key="child.path"  :to="resolvePath(child.path, '')"><el-menu-item:item="child"class="nest-menu"@click="handleClick(child.path)"><template #title><span class="menu-title">{{ child.meta.title }}</span></template></el-menu-item></app-link></el-sub-menu></div></template><script setup lang="ts">import { isExternal } from '@/utils/validate.ts'import AppLink from './Link.vue'import { getNormalPath } from '@/utils/mis'interface MenuItem {path: string;meta?: {icon?: string;title?: string;[key: string]: any;};query?: string;children?: MenuItem[];hidden?: boolean;noShowingChildren?: boolean;}const props = defineProps<{item: MenuItem;isNest: boolean;basePath: string;}>();const onlyOneChild = ref<MenuItem>({ path: '', meta: {} });function hasOneShowingChild(children: MenuItem[] = [], parent: MenuItem): boolean {const showingChildren = children.filter(item => {if (item.hidden) {return false;} else {onlyOneChild.value = item;return true;}});if (showingChildren.length === 1) {return true;}if (showingChildren.length === 0) {onlyOneChild.value = { ...parent, path: '', noShowingChildren: true, meta: {} };return true;}return false;}function handleClick(routePath: string) {localStorage.setItem('routePath', routePath);}function resolvePath(routePath: string, routeQuery?: string) {if (isExternal(routePath)) {return routePath;}if (isExternal(props.basePath)) {return props.basePath;}if (routeQuery) {let query = JSON.parse(routeQuery);return { path: getNormalPath(`${props.basePath}/${routePath}`), query };}return getNormalPath(`${props.basePath}/${routePath}`);}function hasTitle(title: string | undefined): string {return title && title.length > 5 ? title : '';}</script>

4、新建菜单组件src/layout/components/Link.vue

<template><component :is="type" v-bind="linkProps()"><slot /></component>
</template><script setup lang="ts">
import { isExternal } from '@/utils/validate.ts'const props = defineProps({to: {type: [String, Object],required: true}
})const isExt = computed(() => {return isExternal(props.to)
})const type = computed(() => {if (isExt.value) {return 'a'}return 'router-link'
})function linkProps() {if (isExt.value) {return {href: props.to,target: '_blank',rel: 'noopener'}}return {to: props.to}
}
</script>

5、新建方法封装文件src/utils/validate.ts

/*** 判断url是否是http或https * @param {string} path* @returns {Boolean}*/export function isHttp(url) {return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
}/*** 判断path是否为外链* @param {string} path* @returns {Boolean}*/export function isExternal(path) {return /^(https?:|mailto:|tel:)/.test(path)
}/*** @param {string} str* @returns {Boolean}*/
export function validUsername(str) {const valid_map = ['admin', 'editor']return valid_map.indexOf(str.trim()) >= 0
}/*** @param {string} url* @returns {Boolean}*/
export function validURL(url) {const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/return reg.test(url)
}/*** @param {string} str* @returns {Boolean}*/
export function validLowerCase(str) {const reg = /^[a-z]+$/return reg.test(str)
}/*** @param {string} str* @returns {Boolean}*/
export function validUpperCase(str) {const reg = /^[A-Z]+$/return reg.test(str)
}/*** @param {string} str* @returns {Boolean}*/
export function validAlphabets(str) {const reg = /^[A-Za-z]+$/return reg.test(str)
}/*** @param {string} email* @returns {Boolean}*/
export function validEmail(email) {const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/return reg.test(email)
}/*** @param {string} str* @returns {Boolean}*/
export function isString(str) {if (typeof str === 'string' || str instanceof String) {return true}return false
}/*** @param {Array} arg* @returns {Boolean}*/
export function isArray(arg) {if (typeof Array.isArray === 'undefined') {return Object.prototype.toString.call(arg) === '[object Array]'}return Array.isArray(arg)
}

二、修改router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import Layout from '@/layout/index.vue'
//公共路由
export const constantRoutes = [{path: '/',component: Layout,redirect: '/home',hidden: false,children: [{path: 'home',name: 'Home',meta:{ title: '系统知识',routerNum: 0},component: () => import('@/views/Home.vue')}]},{path: '/',redirect: "/article",component: Layout,hidden: false,children: [{path: 'article',name: 'Article',meta:{ title: '插件管理',routerNum: 1},component: () => import('@/views/Article.vue')}]},{path: '/',redirect: "/mix",component: Layout,hidden: false,meta:{ title: '多级菜单',routerNum: 0},children: [{path: 'home',name: 'Home',meta:{ title: '系统知识',routerNum: 0},component: () => import('@/views/Home.vue')},{path: 'article',name: 'Article',meta:{ title: '插件管理',routerNum: 1},component: () => import('@/views/Article.vue')}]},// {//     path: '/article/:id',//     name: 'Article',//     meta:{ title: '插件管理',routerNum: 1},//     component: () => import('@/views/Article.vue')// }
]
const router = createRouter({history: createWebHistory(),routes: constantRoutes
})export default router

在这里插入图片描述

前端路由layout布局处理以及菜单交互(三)

上篇介绍了前端项目部署以及基本依赖的应用，这次主要对于路由以及布局进行模块化处理一、创建layout模块 1、新建src/layout/index.vue <template><el-container class"common-layout"><!-- <el-aside class"aside">&l…...

编程日记 2025/7/12 20:41:35

Zynq PS端外设之GPIO

1. GPIO（通用输入/输出） GPIO外设有4个Bank，Bank0/1通过MIO连接到PS的引脚上；Bank2/3通过EMIO连接到PL的引脚上。注意：Bank1的电平要改成LVCOMS 1.8 GPIO寄存器寄存器： DATA_RO： 读取GPIO的输…...

编程日记 2025/7/8 10:25:22

Java 操作 PDF：从零开始创建功能丰富的PDF文档

Java 操作 PDF：从零开始创建功能丰富的PDF文档引言环境准备依赖引入创建PDF文档一键生成空白PDF添加表单字段（选项）添加电子签名添加公章图像结论引言随着数字化办公的普及，PDF格式因其跨平台兼容性和安全性而被广泛应用于各…...

编程日记 2025/7/13 5:05:47

12.30-1-5学习周报

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录文章链接摘要Abstract一、方法介绍1.HAT-CIR2.Horde3.DWGRNet 二、实验总结文章链接 https://arxiv.org/pdf/2405.04101 摘要本博客介绍了论文《Continual lea…...

编程日记 2025/7/12 21:58:43

H3C Tftp 备份与恢复配置文件

pc 运行 tftp 软件与路由器相连。打开 tftp。在交换机用户试图下，dir /all 命令查看设备的配置文件。备份命令：将配置文件备份到地址为 10.10.10.2 的 tftp 服务器 <H3C>backup startup-configuration to 10.10.10.2 恢复命令：恢复配…...

编程日记 2025/7/7 19:30:07

【Matlab算法】基于改进人工势场法的移动机器人路径规划研究（附MATLAB完整代码）

基于改进人工势场法的移动机器人路径规划研究结果图摘要1. 引言2. 方法说明2.1 基本原理2.2 改进策略3. 核心函数解释3.1 改进的斥力计算函数3.2 路径规划主函数4. 实验设计4.1 实验环境设置4.2 关键参数选择5. 结果分析5.1 实验结果5.2 性能分析附录：完整代码参考文献结果图…...

编程日记 2025/7/13 4:53:34

基于Springboot校园失物招领系统【附源码】

基于Springboot校园失物招领系统效果如下： 系统登陆页面物品页面系统首页面失物招领管理页面失物认领页面宣传视频页面物品挂失留言管理页面宣传视频类型管理页面研究背景在校园环境中，失物招领是一个常见的问题。传统的失物招领方式主要依…...

编程日记 2025/7/12 1:54:22

Vue 自定义指令

首先，我们知道vue中有很多自带指令，v-bind、v-on、v-model等。但在业务开发中，我们常见一些自定义指令如：v-copy、v-longpress等。那么如何定义自己所需的指令呢？ 接下来我们分别从指令注册、指令的钩子函数、指令的参…...

编程日记 2025/7/13 5:04:22

源码 import game.frame.Frame;public class App {public static void main(String[] args) {System.out.println("starting......");new Frame();} } package game.controller;import game.model.Enemy;public class EnemyController implements Runnable{private…...

编程日记 2025/7/13 4:16:24

【Vue教程】使用Vite快速搭建前端工程化项目 | Vue3 | Vite | Node.js

🙋大家好！我是毛毛张! 🌈个人首页： 神马都会亿点点的毛毛张 🚩今天毛毛张分享的是关于如何快速🏃‍♂️搭建一个前端工程化的项目的环境搭建以及流程🌠 文章目录 1.前端工程化环境搭建&#…...

编程日记 2025/7/12 16:00:21

4.CSS文本属性

4.1文本颜色 div { color:red; } 属性值预定义的颜色值red、green、blue、pink十六进制#FF0000,#FF6600,#29D794RGB代码rgb(255,0,0)或rgb(100%,0%,0%) 4.2对齐文本 text-align 属性用于设置元素内文本内容的水平对齐方式。 div{ text-align:center; } 属性值解释left左对齐ri…...

编程日记 2025/7/13 4:54:24

【工具整理】WIN换MAC机器使用工具整理

最近公司电脑升级，研发同学统一更换了 Mac Book Pro 笔记版电脑，整理一下安装了那些软件以及出处，分享记录下～ 知识库工具 1、语雀网址：语雀，为每一个人提供优秀的文档和知识库工具语雀个人花园&…...

编程日记 2025/7/13 4:45:08

Elasticsearch向量检索需要的数据集以及768维向量生成

Elasticsearch8.17.0在mac上的安装 Kibana8.17.0在mac上的安装 Elasticsearch检索方案之一：使用fromsize实现分页快速掌握Elasticsearch检索之二：滚动查询(scrool)获取全量数据(golang) Elasticsearch检索之三：官方推荐方案search_after…...

编程日记 2025/7/10 15:16:47

《小型支付商城系统》项目（一）DDD架构入门

目录 1.DDD架构 1.1充血模型 1.2领域模型 1.2.1实体 1.2.2值对象 1.2.3聚合 1.2.4领域服务 1.2.5工厂 1.2.6仓储（Repository） 2.DDD建模 3.DDD工程模型项目介绍：知识星球 | 深度连接铁杆粉丝，运营高品质社群&#xff…...

编程日记 2025/7/8 5:53:48

web课程设计--酷鲨商城-springboot和vue

文章目录页面截图技术分析数据库代码地址页面截图登陆页面: 分类列表添加分类轮播图列表添加轮播图商品列表添加商品信息技术分析前端使用 html页面的 vue.js（vue2）和element-ui绘制前端界面后台使用Springbootmybatis来实现crud。还有一…...

编程日记 2025/7/13 4:38:44

解决virtualbox克隆ubuntu虚拟机之后IP重复的问题

找遍了国内论坛，没一个能解决该问题的，所以我自己写个文章吧，真讨厌那些只会搬运的，污染国内论坛环境，搜一个问题，千篇一律。问题操作系统版本为"Ubuntu 24.04 LTS" lennytest1:~$ cat /etc…...

编程日记 2025/7/9 1:25:26

活动预告 |【Part1】Microsoft Azure 在线技术公开课：使用 Azure DevOps 和 GitHub 加速开发

课程介绍通过 Microsoft Learn 免费参加 Microsoft Azure 在线技术公开课，掌握创造新机遇所需的技能，加快对 Microsoft Cloud 技术的了解。参加我们举办的“使用 Azure DevOps 和 GitHub 加速开发”活动，了解迁移到 DevOps 所需的合适工具和…...

编程日记 2025/7/13 4:42:18

SpiderFlow平台v0.5.0之数据库连接

一、寻找lib目录安装方式在 SpiderFlow 平台中，连接数据库时需要指定数据库的 DriverClassName，并确保正确配置数据库驱动。通常，驱动文件（JAR 文件）需要放置在指定的文件夹中，以便 SpiderFlow 可以找到并…...

编程日记 2025/7/13 4:07:47

springboot集成阿里云短信服务

springboot集成阿里云短信服务一.阿里云账号准备流程:注册阿里云账号>短信服务>新增资质>新建签名>新建模版>申请秘钥>用代码测试 1.注册阿里云账号 2、登录成功后， ① 在首页搜索短信服务 ② 打开第一个搜索结果 ③ 免费开通 ④ 可以根据…...

编程日记 2025/7/13 4:08:41

Redis 实战篇 ——《黑马点评》（上）

《引言》在进行了前面关于 Redis 基础篇及其客户端的学习之后，开始着手进行实战篇的学习。因内容很多，所以将会分为【上中下】三篇记录学习的内容与在学习的过程中解决问题的方法。Redis 实战篇的内容我写的很详细，为了能写的更好也付出…...

编程日记 2025/7/11 7:06:43

Redis的生态系统和社区支持

Redis的生态系统和社区支持 1. Redis 生态系统 1.1 Redis核心 Redis 是一个高性能的内存存储系统，支持丰富的数据结构（如字符串、列表、集合、哈希和有序集合）。它的核心提供了：高性能数据存储：单线程模型支持每秒数百万级别的操作。多种数据结构：适用于多样化场景，如…...

编程日记 2025/7/12 8:11:57

基于C语言从0开始手撸MQTT协议代码连接标准的MQTT服务器，完成数据上传和命令下发响应(华为云IOT服务器)

文章目录一、前言二、搭建开发环境三、网络编程基础概念科普3.1 什么是网络编程3.2 TCP 和 UDP协议介绍3.3 TCP通信的实现过程四、Windows下的网络编程相关API介绍4.1 常用的函数介绍4.2 函数参数介绍4.3 编写代码体验网络编程五、访问华为云IOT服务器创建一个产品和设备5.2…...

编程日记 2025/7/13 4:50:45

什么是 GPT？Transformer 工作原理的动画展示

大家读完觉得有意义记得关注和点赞！！！ 目录 1 图解 “Generative Pre-trained Transformer”（GPT） 1.1 Generative：生成式 1.1.1 可视化 1.1.2 生成式 vs. 判别式（译注） 1.2 Pr…...

编程日记 2025/7/13 4:52:49

IDEA 编辑器自动识别 Dockerfile 类型高亮和语法提示

在 IDEA 中，如果项目里面的只有一个 Dockerfile文件时，那么此时使用打开这个文件都是 ok 的，支持语法高亮和关键词提示。如果我们有多个 Dockerfile 时， 比如 A_Dockerfile , B_Dockerfile , C_Dockerfile, 这个时候你会发现 IDE…...

编程日记 2025/7/8 19:26:47

AI知识库与用户行为分析：优化用户体验的深度洞察

在当今数字化时代，用户体验（UX）已成为衡量产品成功与否的关键指标之一。AI知识库作为智能客服系统的重要组成部分，不仅为用户提供快速、准确的信息检索服务，还通过用户行为分析，为产品优化提供了深度洞察。…...

编程日记 2025/7/13 4:02:54

什么是Redis哨兵机制？

大家好，我是锋哥。今天分享关于【什么是Redis哨兵机制？】面试题。希望对大家有帮助； 什么是Redis哨兵机制？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网 Redis 哨兵（Sentinel）机制是 Redis 提…...

编程日记 2025/7/9 20:17:57

JavaScript中如何创建对象

在JavaScript中，创建对象有多种方法。以下是几种常见的方式： 1. 对象字面量这是最直接和常用的创建对象的方法。使用花括号 {} 包围一组键值对来定义一个对象。 let person {name: "John",age: 30,greet: function() {console.log("…...

编程日记 2025/7/13 1:23:13

2025：OpenAI的“七十二变”？

朋友们，准备好迎接AI的狂欢了吗？🚀 是不是跟我一样，每天醒来的第一件事就是看看AI领域又有什么新动向？ 尤其是那个名字如雷贯耳的 OpenAI，简直就是AI界的弄潮儿，一举一动都牵动着我们这些“AI发…...

编程日记 2025/7/13 4:58:54

Mysql(MGR)和ProxySQL搭建部署-Kubernetes版本

一、Mysql(MGR) 1.1 statefulSet.yaml apiVersion: apps/v1 kind: StatefulSet metadata:labels:app: mysqlname: mysqlnamespace: yihuazt spec:replicas: 3serviceName: mysql-headlessselector:matchLabels:app: mysqltemplate:metadata:labels:app: mysqlspec:affinity:p…...

编程日记 2025/7/13 4:55:57

一、 创建layout模块