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

vue2侧边导航栏路由

<template><div><!-- :default-active="$route.path" 和index对应其路径 --><el-menu:default-active="active"class="el-menu-vertical-demo"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"router:collapse="isCollapse"><el-menu-item><span slot="title">XX后台管理系统</span></el-menu-item><el-menu-item index="/"><i class="el-icon-menu"></i><span slot="title">首页</span></el-menu-item><el-submenu index="/product"><template slot="title"><i class="el-icon-location"></i><span>产品管理</span></template><el-menu-item-group><el-menu-item index="/product/list"><i class="el-icon-location"></i><span> 产品列表</span></el-menu-item><el-menu-item index="/product/category"><i class="el-icon-location"></i><span> 产品分类</span></el-menu-item></el-menu-item-group><el-submenu index="/product/purchase"><template slot="title">产品采购</template><el-menu-item index="/product/purchase/scheme">采购营销</el-menu-item></el-submenu></el-submenu><el-submenu index="/order"><template slot="title"><i class="el-icon-location"></i><span>订单管理</span></template><el-menu-item-group><el-menu-item index="/order/orderlist"><i class="el-icon-location"></i><span>订单列表</span></el-menu-item><el-menu-item index="/order/summary"><i class="el-icon-location"></i><span>汇总清单</span></el-menu-item><el-menu-item index="/order/review"><i class="el-icon-location"></i><span>订单审核</span></el-menu-item></el-menu-item-group></el-submenu><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">广告分类</span></el-menu-item><el-submenu index="/system"><template slot="title"><i class="el-icon-location"></i><span>系统管理</span></template><el-menu-item-group><el-menu-item index="/system/adminstartion"><i class="el-icon-location"></i><span>系统列表</span></el-menu-item></el-menu-item-group><el-menu-item-group><el-menu-item index="/system/settings"><i class="el-icon-location"></i><span>系统设置</span></el-menu-item></el-menu-item-group></el-submenu></el-menu></div>
</template>
<script>export default {props:['isCollapse'],data(){return{// isCollapse:false}},methods:{handle(){console.log(11111)}},computed:{active(){return this.$route.path}}}
</script><style scoped lang="less">.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}/deep/.el-menu-item-group__title{padding: 0;}
</style>

总的vue中引入侧边栏的组件:

在这里插入图片描述

相关文章:

vue2侧边导航栏路由

<template><div><!-- :default-active"$route.path" 和index对应其路径 --><el-menu:default-active"active"class"el-menu-vertical-demo"background-color"#545c64"text-color"#fff"active-text-col…...

core 不可变类型 线程安全 record

当一个类型的对象在创建时被指定状态后&#xff0c;就不会再变化的对象&#xff0c;我们称之为不可变类型。这种类型是线程安全的&#xff0c;不需要进行线程同步&#xff0c;非常适合并行计算的数据共享。它减少了更新对象会引起各种bug的风险&#xff0c;更为安全。 System.D…...

linux之调度管理(8)-SMP cpu 的 psci启动

一、psci介绍 psci是arm提供的一套电源管理接口&#xff0c;当前一共包含0.1、0.2和1.0三个版本。它可被用于以下场景&#xff1a; &#xff08;1&#xff09;cpu的idle管理 &#xff08;2&#xff09;cpu hotplug以及secondary cpu启动 &#xff08;3&#xff09;系统shutdo…...

review-消息中间件MQ

RabbitMQ RabbitMQ&#xff0c;作为当今流行的开源消息代理软件&#xff0c;以其卓越的可靠性、灵活性和易用性在微服务架构和分布式系统中扮演着至关重要的角色。它不仅能够确保消息在不同系统组件间的高效传递&#xff0c;还能通过其高级消息队列协议&#xff08;AMQP&#x…...

leetcode400第N位数字

代码 class Solution {public int findNthDigit(int n) {int base 1;//位数int weight 9;//权重while(n>(long)base*weight){//300n-base*weight;base;weight*10;}//n111 base3 weight900;n--;int res (int)Math.pow(10,base-1)n/base;int index n%base;return String…...

前端网页开发学习(HTML+CSS+JS)有这一篇就够!

目录 HTML教程 ▐ 概述 ▐ 基础语法 ▐ 文本标签 ▐ 列表标签 ▐ 表格标签 ▐ 表单标签 CSS教程 ▐ 概述 ▐ 基础语法 ▐ 选择器 ▐ 修饰文本 ▐ 修饰背景 ▐ 透明度 ▐ 伪类 ▐ 盒子模型 ▐ 浮动 ▐ 定位 JavaScript教程 ▐ 概述 ▐ 基础语法 ▐ 函数 …...

CSS遮罩:mask

CSS属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 // 一般用位图图片做遮罩 mask: url(~/assets/images/mask.png); mask-size: 100% 100%;// 使用 SVG 图形中的形状来做遮罩 mask: url(~/assets/images/mask.svg#star);…...

Swift闭包的本质

1 闭包的本质其实是一个引用类型&#xff1a;存储在堆空间上&#xff0c;由堆分配空间&#xff0c;且生命周期由ARC&#xff08;自动引用计数机制&#xff09;管理 2 捕获值&#xff1a;闭包会捕获上下文使用到的变量&#xff08;引用类型会保持引用关系&#xff09;&#xff…...

时代变迁对传统机器人等方向课程的巨大撕裂

2020年之后&#xff0c;全面转型新质课程规划&#xff0c;传统课程规划全部转为经验。 农耕-代表性生产关系-封建分配制度主要生产力-人力工业-代表性生产关系-资本分配制度工业分为机械时代&#xff0c;电气时代&#xff0c;信息时代&#xff1b;主要生产力-人力转为人脑&…...

【算法设计与分析实训】第1关:求序列的最大字段和

务描述 本关任务&#xff1a;编写用动态规划解决最大字段和问题。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a;动态规划。 编程要求 给定由n个整数&#xff08;可能为负数&#xff09;组成的序列&#xff1a;a1,a2,……,an, 求该序列的最大子段和。当所有整…...

【澜舟科技-注册/登录安全分析报告】

前言 由于网站注册入口容易被机器执行自动化程序攻击&#xff0c;存在如下风险&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露&#xff0c;不符合国家等级保护的要求。短信盗刷带来的拒绝服务风险 &#xff0c;造成用户无法登陆、注册&#xff0c;大量收到垃圾短信的…...

【读书笔记-《网络是怎样连接的》- 7】Chapter3_2 路由器

本篇继续介绍路由器及其转发过程。 1 路由器内部结构 路由器内部结构图如图所示。 即主要包含左侧的包转发模块和右侧的端口模块。转发模块负责查找包的发送目的地&#xff0c;端口模块完成包的发送。通过安装不同的硬件&#xff0c;转发模块不仅可以支持以太网&#xff0c;也…...

Android Activity 基础接口知识和常见问题

Activity 知识点及问题点 接口onMultiWindowModeChangedonConfigurationChanged 常见问题Android解决点击桌面图标&#xff0c;就重新启动应用程序问题 接口 onMultiWindowModeChanged 定义 onMultiWindowModeChanged是Android中Activity类的一个回调方法。它会在活动&#xf…...

利用python 检测当前目录下的所有PDF 并转化为png 格式

以下是一个完整的 Python 脚本&#xff0c;用于检测当前目录下的所有 PDF 文件并将每一页转换为 PNG 格式&#xff1a; import os from pdf2image import convert_from_path# 设置输出图像的 DPI&#xff08;分辨率&#xff09; DPI 300# 获取当前目录 current_directory os…...

解决 Spring Boot 中 `Ambiguous mapping. Cannot map ‘xxxController‘ method` 错误

前言 在使用 Spring Boot 开发 Web 应用时&#xff0c;经常会遇到各种各样的错误。其中一种常见的错误是 Ambiguous mapping. Cannot map ‘testController‘ method。本文将详细介绍这个错误的原因及解决方法&#xff0c;帮助开发者快速定位并解决问题。 错误解释 这个错误…...

C++ 函数返回值优化

本文中部分内容来自下面的文章&#xff0c;还有一部分来自智谱清言 C 返回值优化_c 局部变量返回优化-CSDN博客 elision:省略 copy elision&#xff1a;拷贝省略 RVO (Return Value Optimization)&#xff1a;返回值优化 ------ 我最近也遇到了上面博文中说到的问题&…...

c++源码阅读__ThreadPool__正文阅读

一. 简介 本章我们开始阅读c git 高星开源项目ThreadPool, 这是一个纯c的线程池项目, 并且代码量极小, 非常适合新手阅读 git地址: progschj / ThreadPool 二. 前提知识 为了面对不同读者对c掌握情况不同的情况, 这里我会将基本上稍微值得一说的前提知识点, 全部专门写成一篇…...

关于ES的查询

查询结果那么多字段都是什么&#xff1f; 为什么会提到这个问题呢&#xff0c;因为默认ES查询的结果会有很多信息&#xff0c;我们可能并不希望要那么多数据&#xff0c;所以你需要了解这些字段都表示什么&#xff0c;并正确的返回和使用它们。 took– Elasticsearch 运行查询…...

数据结构初识

目录 1.初识 2.时间复杂度 常见时间复杂度举例&#xff1a; 3.空间复杂度 4.包装类&简单认识泛型 4.1装箱和拆箱 5.泛型 6.泛型的上界 7.泛型方法 8.List接口 1.初识 1.多画图 2.多思考 3.多写代码 4.多做题 牛客网-题库/在线编程/剑指offer 算法篇&#xff1a…...

保存数据到Oracle时报错ORA-17004: 列类型无效: 1111

1、问题描述&#xff1a; 关键信息&#xff1a;Mybatis&#xff1b;Oracle &#xff08;1&#xff09;保存信息到Oracle时报错&#xff1a; Caused by: org.apache.ibatis.type.TypeException: Error setting null for parameter #10 with JdbcType OTHER . Try setting a dif…...

告别重复点击!淘金币自动化脚本让你每天多出20分钟自由时间

告别重复点击&#xff01;淘金币自动化脚本让你每天多出20分钟自由时间 【免费下载链接】taojinbi 淘宝淘金币自动执行脚本&#xff0c;包含蚂蚁森林收取能量&#xff0c;芭芭农场全任务&#xff0c;解放你的双手 项目地址: https://gitcode.com/gh_mirrors/ta/taojinbi …...

LayerDivider终极指南:5分钟掌握智能插画分层技术

LayerDivider终极指南&#xff1a;5分钟掌握智能插画分层技术 【免费下载链接】layerdivider A tool to divide a single illustration into a layered structure. 项目地址: https://gitcode.com/gh_mirrors/la/layerdivider 你是否曾经面对一张复杂的插画作品&#xf…...

Cognize-Agent™空间智能体,98.5%故障预警准确率,终结非计划停机

Cognize-Agent™空间智能体&#xff0c;98.5%故障预警准确率&#xff0c;终结非计划停机工业制造领域&#xff0c;设备非计划停机始终是制约生产效率、拉高运维成本的核心痛点。传统设备运维依赖定期检修、事后抢修&#xff0c;依赖人工巡检与单一数据监测&#xff0c;无法提前…...

三维动画课程期末复盘:从零搭建我的马卡龙童话游乐场✨

当我按下 3ds Max 的渲染按钮&#xff0c;看着浅蓝的摩天轮缓缓转动、粉白的旋转木马跟着节奏起舞、淡紫色热气球轻轻飘动时&#xff0c;我才真正意识到&#xff1a;为期一学期的三维动画课程&#xff0c;就这样在我的指尖落下了帷幕。从刚打开软件连工具栏都认不全的 “小白”…...

AI驱动的链上数据分析:Arkham工具实战与智能监控体系构建

1. 项目概述&#xff1a;一个面向链上数据的智能分析中枢如果你和我一样&#xff0c;在加密货币和Web3的世界里摸爬滚打了几年&#xff0c;你一定会对一个问题深有感触&#xff1a;链上数据浩如烟海&#xff0c;但真正能转化为有效决策的洞察却少之又少。我们每天面对着成千上万…...

C# 图像清晰度“核武器”:8个PictureBox永不模糊的硬核实战技巧

在 Windows Forms 开发中&#xff0c;PictureBox 是我们展示视觉效果的窗口。然而&#xff0c;你是否曾因为图片在缩放或背景色不匹配时变得模糊、锯齿横生&#xff0c;甚至出现难看的“黑边”而感到抓狂&#xff1f;这不仅影响用户体验&#xff0c;更是对完美主义开发者的一种…...

怎么降维普AI率到30%以下?本科合格区间实战完整路径方案!

怎么降维普AI率到30%以下&#xff1f;本科合格区间实战完整路径方案&#xff01; 本科生维普 AI 率合格线 30%&#xff0c;比硕博严标准 15% 宽松一倍。但如果你的论文 AI 率 60% 重灾区&#xff0c;降到 30% 以下还是需要工具。你的真实情况是什么&#xff1f; 本科 4-5 万字论…...

多渠道订单数据处理自动化,落地步骤与ERP打通方案 | 2026企业级智能体实战手册

在2026年的数字化转型深水区&#xff0c;企业面临的不再是“是否要自动化”的问题&#xff0c; 而是如何在高并发、多维度的全渠道业务压力下&#xff0c; 实现订单流、资金流与信息流的绝对同步。 传统的OMS&#xff08;订单管理系统&#xff09;与ERP&#xff08;企业资源计划…...

Cursor Free VIP:如何一键突破AI编程助手使用限制?

Cursor Free VIP&#xff1a;如何一键突破AI编程助手使用限制&#xff1f; 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached …...

寄生电感容易被忽略,却是电路不稳定的隐形元凶

调试电路板的时候&#xff0c;最让人抓狂的并不是那些明面上能查到文档的参数问题。示波器一抓波形&#xff0c;明明电源电压已经稳定&#xff0c;负载也没动&#xff0c;可偏偏就是有那种挥之不去的毛刺&#xff0c;幅度不大&#xff0c;频率不低&#xff0c;排查了半天才发现…...