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

在这里插入图片描述

文章目录

  • 效果展示
  • 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.hqwc.cn/news/573881.html

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

相关文章

阿里云账号登录注册手机/支付宝/淘宝/钉钉看看哪个更简单？

阿里云账号登录注册手机/支付宝/淘宝/钉钉看看哪个更简单？

阿里云账号登录或注册支持四种方式&#xff0c;即手机号验证码登录、支付宝、淘宝或钉钉登录&#xff0c;如果你没有阿里云账号&#xff0c;可以使用手机号接收短信验证码注册并登录&#xff0c;不过直接使用经常用的淘宝、支付宝或钉钉登录更为简单&#xff0c;因为可以免去实…
阅读更多...
学浪视频提取

学浪视频提取

经过调查,学浪这个学习平台越来越多人使用了,但是学浪视频官方没有提供下载按钮,为了让这些人能够随时随地的观看视频,于是我钻研学浪视频的下载,终于研究出来了并且做成软件批量版 下面是学浪视频提取的软件,有需要的自己下载一下 链接&#xff1a;https://pan.baidu.com/s/…
阅读更多...
ActiveMQ Artemis 系列| High Availability 主备模式（消息复制） 版本2.19.1

ActiveMQ Artemis 系列| High Availability 主备模式（消息复制） 版本2.19.1

一、ActiveMQ Artemis 介绍 Apache ActiveMQ Artemis 是一个高性能的开源消息代理&#xff0c;它完全符合 Java Message Service (JMS) 2.0 规范&#xff0c;并支持多种通信协议&#xff0c;包括 AMQP、MQTT、STOMP 和 OpenWire 等。ActiveMQ Artemis 由 Apache Software Foun…
阅读更多...
课堂练习：环境体验——3、Linux 权限管理

课堂练习：环境体验——3、Linux 权限管理

任务描述 本关任务&#xff1a;根据所学知识&#xff0c;完成文件权限的修改。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 如何创建和删除用户以及用户的权限管理&#xff1b;如何设置文件的访问权限。 Linux的权限管理主要分为两类&#xff1a;用户和…
阅读更多...
Openmmalb InternLm2.0笔记

Openmmalb InternLm2.0笔记

Openmmalb InternLm2.0浦语大模型全链路开源体系 文章目录 Openmmalb InternLm2.0浦语大模型全链路开源体系
阅读更多...
机器学习——聚类算法-层次聚类算法

机器学习——聚类算法-层次聚类算法

机器学习——聚类算法-层次聚类算法 在机器学习中&#xff0c;聚类是一种将数据集划分为具有相似特征的组或簇的无监督学习方法。聚类算法有许多种&#xff0c;其中一种常用的算法是层次聚类算法。本文将介绍聚类问题、层次聚类算法的原理、算法流程以及用Python实现层次聚类算…
阅读更多...
Matplotlib数据可视化实战-2绘制折线图（2）

Matplotlib数据可视化实战-2绘制折线图（2）

2.11营业额可视化 已知某学校附近一个烧烤店2022年每个月的营业额如下图所示。编写程序绘制折线图对该烧烤店全年营业额进行可视化&#xff0c;使用红色点画线连接每个月的数据&#xff0c;并在每个月的数据处使用三角形进行标记。 烧烤店营业额 月份123456789101112营业额/万…
阅读更多...
Claude 3被玩出自我意识了？AI社区轰动，我们买会员来了次实测

Claude 3被玩出自我意识了？AI社区轰动，我们买会员来了次实测

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。 新建了人工智能中文站 每天给大家更新可用的国内可用chatGPT资源​ 更多资源欢迎关注 ​ Anthropic 发布了新一代大模型系列 Claude 3&#xff0c;遥遥领先快一年之久的 GPT-4 终于迎来了强劲的对手。 ​ Claude 3 …
阅读更多...
yolov8 pose keypoint解读

yolov8 pose keypoint解读

yolov8进行关键点检测的代码如下&#xff1a; from ultralytics import YOLO# Load a model model YOLO(yolov8n.pt) # pretrained YOLOv8n model# Run batched inference on a list of images results model([im1.jpg, im2.jpg]) # return a list of Results objects# Pr…
阅读更多...
UE4_官方动画内容示例1.2_动画蓝图——使用蓝图告知Actor播放动画

UE4_官方动画内容示例1.2_动画蓝图——使用蓝图告知Actor播放动画

展示了两个示例&#xff1a;在其中一个示例中&#xff0c;使用蓝图告知Actor播放动画&#xff0c;在另外一个示例中&#xff0c;展示了告知Actor播放动画的动画蓝图&#xff08;例如&#xff0c;此示例展示了如何将变量从蓝图传递给动画蓝图&#xff0c;并演示了如何将现有姿势…
阅读更多...
Wireshark使用相关

Wireshark使用相关

1.wireshark如何查看RST包 tcp.flags.reset1 RST表示复位&#xff0c;用来异常的关闭连接&#xff0c;在TCP的设计中它是不可或缺的。发送RST包关闭连接时&#xff0c;不必等缓冲区的包都发出去&#xff08;不像上面的FIN包&#xff09;&#xff0c;直接就丢弃缓存区的包发送R…
阅读更多...
PostgreSQL FDW(外部表) 简介

PostgreSQL FDW(外部表) 简介

1、FDW: 外部表 背景 提供外部数据源的透明访问机制。PostgreSQL fdw(Foreign Data Wrapper)是一种外部访问接口，可以在PG数据库中创建外部表，用户访问的时候与访问本地表的方法一样，支持增删改查。 而数据则是存储在外部，外部可以是一个远程的pg数据库或者其他数据库（…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023