vue3+ts+element home页面侧边栏+头部组件+路由组件组合页面教程

news/2024/5/9 2:52:20/文章来源:https://blog.csdn.net/weixin_48998573/article/details/137080470

在这里插入图片描述

文章目录

  • 效果展示
  • template代码
  • script代码
  • 样式代码

效果展示

在这里插入图片描述

template代码

<template><el-container class="home"><el-aside class="flex" :style="{ width: asideDisplay ? '70px' : '290px' }"><div class="aside-left"><div class="aside-logo"><img src="./logo.png" class="aside-logo-img" /></div><div class="aside-list"><div class="aside-list-item" :class="{ active: item.path === asideActive }"v-for="(item, index) in routesList" :key="index" @click="handleRoutes(item)">{{ item.meta.title }}</div></div></div><div class="aside-right" :style="{ display: asideDisplay ? 'none' : 'block' }"><div class="aside-right-title">Admin.NET</div><div class="aside-right-list"><div class="aside-right-list-item" :class="{ active: item.path === currentRoute.children.path }"v-for="(item, index) in routesListItem.children" :key="index" @click="handleRoutesItem(item)">{{item.meta.title }}</div></div></div></el-aside><el-container class="flex1"><el-header class=""><div class="header-navbars-container"><el-icon v-if="asideDisplay" @click="asideDisplay = !asideDisplay"><Expand /></el-icon><el-icon v-if="!asideDisplay" @click="asideDisplay = !asideDisplay"><Fold /></el-icon><el-breadcrumb separator="/"><el-breadcrumb-item>{{ currentRoute.meta.title }}</el-breadcrumb-item><el-breadcrumb-item :to="{ path: currentRoute.children.path }">{{ currentRoute.children.meta.title }}</el-breadcrumb-item></el-breadcrumb></div><div class="header-navbars-tagsview"><span class="header-navbars-tagsview-span"><span class="header-navbars-tagsview-item" v-for="(item, index) in currentList" :key="index"@click="handleRoutes(item)" :class="{ 'active': item.path === currentRoute.children.path }">{{ item.meta.title }}<!-- {{currentList}} --><el-icon><Close /></el-icon></span></span></div></el-header><el-main><router-view></router-view></el-main></el-container></el-container>
</template>

script代码

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { Expand, Fold, Close } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';// 页面加载时
onMounted(() => {getAllRoutes();firstEnter();
});const router = useRouter();// 当前页面的路由对象
const routesList = reactive(new Array<any>());
const asideActive = ref('');
const asideDisplay = ref(true);
const routesListItem = reactive({meta: { title: '' },children: new Array<any>(),name: '',path: '',});
const currentRoute = reactive({meta: { title: '' },children: {meta: { title: '' },name: '',path: '',},name: '',path: '',
});const currentList = reactive(new Array<any>());const getAllRoutes = () => {const routes = router.getRoutes();console.log(routes); // 这里会输出所有的路由记录routes.forEach((route: any) => {if (route.meta.level == 1) {console.log(route);routesList.push(route)}})return routes;
};const firstEnter = () => {const value = localStorage.getItem('currentList');const value2 = localStorage.getItem('routesListItem');const value3 = localStorage.getItem('currentRoute');// 检查value是否为null  if (value !== null) {// 如果value不是null，则尝试解析它  try {const parsedValue = JSON.parse(value);parsedValue.forEach((item: any) => {const valFind = currentList.find((val: any) => {if (val.name == item.name) {return val}})if (!valFind) {currentList.push(item)}});} catch (error) {// 如果解析过程中发生错误，比如value不是一个有效的JSON字符串，则处理错误  console.error('Error parsing JSON:', error);currentList.push({name: router.currentRoute.value.name,path: router.currentRoute.value.path,meta: {title: router.currentRoute.value.meta.title}})}} else {// 如果value是null，打印null或者做其他处理  console.log(null, 'currentList is null or not set');currentList.push({name: router.currentRoute.value.name,path: router.currentRoute.value.path,meta: {title: router.currentRoute.value.meta.title}})}// 检查value是否为null  if (value2 !== null) {// 如果value不是null，则尝试解析它  try {const parsedValue = JSON.parse(value2);routesListItem.children = parsedValue.childrenroutesListItem.name = parsedValue.nameroutesListItem.path = parsedValue.pathroutesListItem.meta = parsedValue.meta} catch (error) {// 如果解析过程中发生错误，比如value不是一个有效的JSON字符串，则处理错误  console.error('Error parsing JSON:', error);}} else {// 如果value是null，打印null或者做其他处理  const parsedValue = router.currentRoute.value.matched[1]routesList.forEach(item => {if (parsedValue.path.indexOf(item.name) !== -1) {routesListItem.children = item.childrenroutesListItem.name = item.nameroutesListItem.path = item.pathroutesListItem.meta = item.meta}})console.log(routesListItem, 'routesList');}if (value3 !== null) {// 如果value不是null，则尝试解析它  try {const parsedValue = JSON.parse(value3);currentRoute.children = parsedValue.childrencurrentRoute.name = parsedValue.namecurrentRoute.path = parsedValue.pathcurrentRoute.meta = parsedValue.metaasideActive.value = parsedValue.path} catch (error) {// 如果解析过程中发生错误，比如value不是一个有效的JSON字符串，则处理错误  console.error('Error parsing JSON:', error);}} else {// 如果value是null，打印null或者做其他处理  const parsedValue = router.currentRoute.value.matched[2]routesListItem.children.forEach(item => {if (parsedValue.path.indexOf(item.path) != -1) {console.log();console.log(item, 'item');currentRoute.children = itemcurrentRoute.name = routesListItem.namecurrentRoute.path = routesListItem.pathcurrentRoute.meta = routesListItem.metaasideActive.value = routesListItem.path}})console.log(asideActive, 'currentRoute is null or not set');}
};
const handleRoutes = (item: any) => {if (item.name == routesListItem.name) {asideDisplay.value = !asideDisplay.value} else {asideDisplay.value = falseconsole.log(123123);}routesListItem.children = item.childrenroutesListItem.name = item.nameroutesListItem.path = item.pathroutesListItem.meta = item.metaasideActive.value = item.path// console.log(routesListItem.valueOf);
};
const handleRoutesItem = (item: any) => {router.push(item.path);currentRoute.name = routesListItem.namecurrentRoute.path = routesListItem.pathcurrentRoute.meta = routesListItem.metacurrentRoute.children = itemlocalStorage.setItem('currentRoute', JSON.stringify(currentRoute));localStorage.setItem('routesListItem', JSON.stringify(routesListItem));const valFind = currentList.find((val: any) => {if (val.name == item.name) {return val}})if (!valFind) {currentList.push(item)localStorage.setItem('currentList', JSON.stringify(currentList));}};</script>

样式代码

<style lang="scss">
.home {width: 100vw;height: 100vh;
}.el-container {width: 100%;height: 100%;
}.el-aside {min-width: 70px;max-width: 290px;
}.aside-left {width: 70px;height: 100%;background: #2c3a49;.aside-logo {height: 50px;display: flex;align-items: center;justify-content: center;img {width: 80%;height: 80%;}}.aside-list-item {width: calc(100% - 10px);height: 40px;text-align: center;color: #f0f0f0;font-size: 12px;background: #de291080;cursor: pointer;margin: 5px;border-radius: 5px;line-height: 40px;}.active {background: #de2910;}
}.aside-right {width: 220px;transition: width 0.3s ease;border-right: 1px solid #e4e7ed;.aside-right-title {width: 220px;height: 50px;display: flex;align-items: center;justify-content: center;box-shadow: rgba(0, 21, 41, 0.02) 0px 1px 4px;white-space: nowrap;font-weight: 800;font-size: 18px;color: #11559c;}.aside-right-list {.aside-right-list-item {width: 100%;height: 50px;display: flex;align-items: center;justify-content: center;cursor: pointer;}.active {width: calc(100% - 5px);border-right: 5px solid #de2910;color: #de2910;background-color: #de281027;}}
}.el-header {padding: 0px;height: 100px;
}.header-navbars-container {background-color: #fff;border-bottom: 1px solid #f1f2f3;position: relative;z-index: 1999;display: flex;height: 60px;.el-icon {width: 60px;height: 60px;font-size: 12px;svg {height: 2em;width: 2em;}}.el-breadcrumb {// display: flex;font-size: 14px;line-height: 60px;.el-breadcrumb__item {align-items: center;display: math;float: none;}}
}.header-navbars-tagsview {min-height: 40px;padding-right: 20px;background-color: #fff;border-bottom: 1px solid #f1f2f3;overflow: auto;.header-navbars-tagsview-span {white-space: nowrap;}.header-navbars-tagsview-item {// display: inline-block;line-height: 40px;margin: 0px 0px 0px 10px;font-size: 12px;background-color: #de291080;padding: 5px 10px;color: #fff;border-radius: 5px;cursor: pointer;white-space: nowrap;}.header-navbars-tagsview-item:hover {background-color: #de2810d2;}.el-icon {position: relative;top: 2px;right: -2px;}.active {background-color: #de2910;}
}.el-main {min-width: 1000px;
}
</style>

您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。

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

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

相关文章

KubeSphere简单介绍及安装使用

KubeSphere简单介绍及安装使用

KubeSphere 概述 官网地址&#xff1a;https://kubesphere.io/zh/ 什么是 kubesphere KubeSphere 是一个开源的多云容器管理平台&#xff0c;旨在简化企业级 k8s 集群的部署、管理和运维。它提供了一个可视化的管理界面&#xff0c;帮助用户更轻松地管理和监控 k8s 集群&…
阅读更多...
vscode使用Runner插件将.exe文件统一放到一个目录下

vscode使用Runner插件将.exe文件统一放到一个目录下

找到右下角管理&#xff0c;点击扩展。 找到Code Runner插件&#xff0c;打开扩展设置。 向下翻&#xff0c;找到Executor Map&#xff0c;点击在settings.json中编辑。 在c和c的配置命令栏中增加\\\output\\即可。&#xff08;增加的目录不能自动创建&#xff0c;需要手动创建…
阅读更多...
基于大语言模型的云故障根因分析｜顶会EuroSys24论文

基于大语言模型的云故障根因分析｜顶会EuroSys24论文

*马明华 微软主管研究员 2021年CCF国际AIOps挑战赛程序委员会主席&#xff08;第四届&#xff09; 2021年博士毕业于清华大学&#xff0c;2020年在佐治亚理工学院做访问学者。主要研究方向是智能运维&#xff08;AIOps&#xff09;、软件可靠性。近年来在ICSE、FSE、ATC、EuroS…
阅读更多...
t-rex2开放集目标检测

t-rex2开放集目标检测

论文链接&#xff1a;http://arxiv.org/abs/2403.14610v1 项目链接&#xff1a;https://github.com/IDEA-Research/T-Rex 这篇文章的工作是基于t-rex1的工作继续做的&#xff0c;核心亮点&#xff1a; 是支持图片/文本两种模态的prompt进行输入&#xff0c;甚至进一步利用两…
阅读更多...
简单的SpringMVC项目创建流程（基于XML文件（了解））

简单的SpringMVC项目创建流程（基于XML文件（了解））

1&#xff1a;首先创建一个maven项目&#xff0c;并在pom.xml文件中导入依赖 <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 …
阅读更多...
浅模仿小米商城布局（有微调）

浅模仿小米商城布局（有微调）

CSS文件 *{margin: 0;padding: 0;box-sizing: border-box; }div[class^"h"]{height: 40px; } div[class^"s"]{height: 100px; } .h1{width: 1528px;background-color: green; } .h11{background-color:rgb(8, 220, 8); } .h111{width: 683px;background-c…
阅读更多...
Linux 基础命令1

Linux 基础命令1

目录 一.Linux优点&#xff08;优势&#xff09; 二.Shell 三.Linux命令 四.help命令 五.Linux目录结构 六.目录操作 七.路径 一.Linux优点&#xff08;优势&#xff09; 1.一切都是一个文件 2.系统中拥有小型 &#xff0c;轻量级&#xff0c;单一用途的程序 3.避免令…
阅读更多...
【循环神经网络rnn】一篇文章讲透

【循环神经网络rnn】一篇文章讲透

目录 引言 二、RNN的基本原理 代码事例 三、RNN的优化方法 1 长短期记忆网络&#xff08;LSTM&#xff09; 2 门控循环单元&#xff08;GRU&#xff09; 四、更多优化方法 1 选择合适的RNN结构 2 使用并行化技术 3 优化超参数 4 使用梯度裁剪 5 使用混合精度训练 …
阅读更多...
MySQL高阶SQL语句

MySQL高阶SQL语句

文章目录 MySQL高阶SQL语句MySQL常用查询1、按关键字排序1.1 语法1.2 ASC和DESC1.3 对数据表中信息进行排序1.3.1 普通排序1.3.2 结合where进行条件过滤1.3.3 对多个字段进行排序 2、区间判断及查询不重复记录2.1 and/or —— 且/或2.1.1 普通查询2.1.2 嵌套/多条件查询 2.2 di…
阅读更多...
验证码demo(简单实现)

验证码demo(简单实现)

前言 我们注意到我们登录网站的时候经常会用到网络验证码,今天我们就简单实现一个验证码的前后端交互问题,做一个小demo 准备 我们这里并不需要依靠原生的java来实现,而是只需要引入一个maven依赖,使用现成的封装好的即可,这是我使用的是hutool工具包 网址:Hutool&#x1f36c;…
阅读更多...
Linux 收发网络包的流程

Linux 收发网络包的流程

应用层&#xff1a; 功能&#xff1a;提供应用程序间通信。例子&#xff1a;电子邮件客户端如Outlook或Thunderbird&#xff0c;它们提供用户界面来发送和接收电子邮件。这些客户端使用SMTP&#xff08;用于发送邮件&#xff09;和IMAP或POP3&#xff08;用于接收邮件&#xff…
阅读更多...
计算机软件安全

计算机软件安全

一、软件安全涉及的范围 1.1软件本身的安全保密 软件的本质与特征&#xff1a; 可移植性 寄生性 再生性 可激发性 攻击性 破坏性 …… 知识产权与软件盗版 软件商品交易形式不透明&#xff0c;方式多样&#xff0c;传统商标标识方法不适用&#xff1b; 盗版方法简捷…
阅读更多...
蓝桥杯刷题之路径之谜

蓝桥杯刷题之路径之谜

题目来源 路径之谜 不愧是国赛的题目 题意 题目中会给你两个数组&#xff0c;我这里是分别用row和col来表示 每走一步&#xff0c;往左边和上边射一箭&#xff0c;走到终点的时候row数组和col数组中的值必须全部等于0这个注意哈&#xff0c;看题目看了半天&#xff0c;因为…
阅读更多...
ASP.Net添加Swagger注释

ASP.Net添加Swagger注释

文章目录 Swagger添加Swagger注释 Swagger 添加Swagger注释 1、右击项目->选择属性->点击生成->输出&#xff0c;选中文档文件 2、配置服务 在program.cs 文件里配置SwaggerUI //增加项一 builder.Services.AddSwaggerGen(c> {c.SwaggerDoc("v1", ne…
阅读更多...
策略路由-IP-Link-路由协议简介

策略路由-IP-Link-路由协议简介

策略路由 策略路由和路由策略的不同 1.策略路由的操作对象是数据包&#xff0c;在路由表已经产生的情况下&#xff0c;不按照路由表进行转发&#xff0c;而是根据需要&#xff0c;依照某种策略改变数据包的转发路径 2.路由策略的操作对象是路由信息。路由策略的主要实现了路…
阅读更多...
基于Java中的SSM框架实现考研指导平台系统项目【项目源码+论文说明】

基于Java中的SSM框架实现考研指导平台系统项目【项目源码+论文说明】

基于Java中的SSM框架实现考研指导平台系统演示 摘要 应对考研的学生&#xff0c;为了更好的使校园考研有一个更好的环境好好的学习&#xff0c;建议一个好的校园网站&#xff0c;是非常有必要的。提供学生的学习提供一个交流的空间。帮助同学们在学习高数、学习设计、学习统计…
阅读更多...
web前端面试题-----＞VUE

web前端面试题-----＞VUE

Vue的数据双向绑定是通过Vue的响应式系统实现的。具体原理&#xff1a; 1. Vue会在初始化时对数据对象进行遍历&#xff0c;使用Object.defineProperty方法将每个属性转化为getter、setter。这样在访问或修改数据时&#xff0c;Vue能够监听到数据的变化。 2. 当数据发生变化时…
阅读更多...
C语言-Win11安装古老的VC6.0

C语言-Win11安装古老的VC6.0

win11安装VC6 有些学校一直还在使用VC6.0&#xff0c;我们尝试在Win1 下安装这个老古董&#xff0c;以下是在win11下安装VC6.0的方法。 点击安装文件 输入产品序列号 修改公共安装文件夹 如果C盘空间足够可以不用修改。 此处会发现鼠标一直在转圈不能完成更新系统&#xff0c;可…
阅读更多...
ChatGPT、千问、讯飞星火等在工作中提高效率

ChatGPT、千问、讯飞星火等在工作中提高效率

提升代码效率 通义灵码 适配性 100多种主流语言&#xff08;C/C、Java、Python、Go、JavaScript、TypeScript等语言表现更为出色&#xff09;支持常用 IDE&#xff08;VS Code、IntelliJ IDEA、GoLand、PyCharm、WebStorm、CLion、PhpStorm、Android Studio、Xcode、iCoding…
阅读更多...
记一次 .NET某游戏后端API服务 CPU爆高分析

记一次 .NET某游戏后端API服务 CPU爆高分析

一&#xff1a;背景 1. 讲故事 前几天有位朋友找到我&#xff0c;说他们的API服务程序跑着跑着CPU满了降不下去&#xff0c;让我帮忙看下怎么回事&#xff0c;现在貌似民间只有我一个人专注dump分析&#xff0c;还是申明一下我dump分析是免费的&#xff0c;如果想学习.NET高级…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业