vue-el-admin-Navlinkage代码改动问题

问题一

element顶部导航icon图标在渲染时图标不显示,修改了E:\BaiduNetdiskDownload\vue-el-admin-navlinkage-master\src\layout\components\Topbar.vue文件19行的代码解决

<i :class="item.meta ? item.meta.icon : item.children[0].meta.icon"></i>
<span>{{ item.meta ? item.meta.title : item.children[0].meta.title }}</span>
<template><div class="top-nav"><div class="log"><img :src="avatar+'?imageView2/1/w/25/h/25'" class="logo"  style="display: inline-block;vertical-align: middle"><span style="display: inline-block;vertical-align: middle;font-size:18px">路游广告投放平台</span></div><hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /><el-menu:active-text-color="variables.menuActiveText":default-active="activeMenu"mode="horizontal"@select="handleSelect"><div v-for="item in routes" :key="item.path" class="nav-item"><app-link :to="resolvePath(item)"><el-menu-itemv-if="!item.hidden":index="item.path"><i :class="item.meta ? item.meta.icon : item.children[0].meta.icon"></i><span>{{ item.meta ? item.meta.title : item.children[0].meta.title }}</span></el-menu-item></app-link></div></el-menu><div class="right-menu"><el-dropdown class="avatar-container" trigger="click"><div class="avatar-wrapper"><img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar"><i class="el-icon-caret-bottom" /></div><el-dropdown-menu slot="dropdown" class="user-dropdown"><router-link to="/"><el-dropdown-item>Home</el-dropdown-item></router-link><a href="https://github.com/PanJiaChen/vue-admin-template/" target="_blank"><el-dropdown-item>Github</el-dropdown-item></a><a href="https://panjiachen.github.io/vue-element-admin-site/#/" target="_blank"><el-dropdown-item>Docs</el-dropdown-item></a><el-dropdown-item divided @click.native="logout"><span style="display:block;">Log Out</span></el-dropdown-item></el-dropdown-menu></el-dropdown></div></div>
</template><script>
import { mapGetters } from 'vuex'
import AppLink from './Sidebar/Link'
import Hamburger from '@/components/Hamburger'
import { constantRoutes } from '@/router'
import variables from '@/styles/variables.scss'
import { isExternal } from '@/utils/validate'
export default {name: 'Topbar',components: {AppLink,Hamburger},data() {return {routes: constantRoutes}},computed: {activeMenu() {const route = this.$routeconst { meta, path } = route// if set path, the sidebar will highlight the path you setif (meta.activeMenu) {return meta.activeMenu}// 如果是首页,首页高亮if (path === '/dashboard') {return '/'}// 如果不是首页,高亮一级菜单const activeMenu = '/' + path.split('/')[1]return activeMenu},variables() {return variables},sidebar() {return this.$store.state.app.sidebar},...mapGetters(['avatar'])},mounted() {this.initCurrentRoutes()},methods: {// 通过当前路径找到二级菜单对应项,存到store,用来渲染左侧菜单initCurrentRoutes() {const { path } = this.$routelet route = this.routes.find(item => item.path === '/' + path.split('/')[1])// 如果找不到这个路由,说明是首页if (!route) {route = this.routes.find(item => item.path === '/')}this.$store.commit('permission/SET_CURRENT_ROUTES', route)this.setSidebarHide(route)},// 判断该路由是否只有一个子项或者没有子项,如果是,则在一级菜单添加跳转路由isOnlyOneChild(item) {if (item.children && item.children.length === 1) {return true}return false},resolvePath(item) {// 如果是个完成的url直接返回if (isExternal(item.path)) {return item.path}// 如果是首页,就返回重定向路由if (item.path === '/') {const path = item.redirectreturn path}// 如果有子项,默认跳转第一个子项路由let path = ''/*** item 路由子项* parent 路由父项*/const getDefaultPath = (item, parent) => {// 如果path是个外部链接(不建议),直接返回链接,存在个问题:如果是外部链接点击跳转后当前页内容还是上一个路由内容if (isExternal(item.path)) {path = item.pathreturn}// 第一次需要父项路由拼接,所以只是第一个传parentif (parent) {path += (parent.path + '/' + item.path)} else {path += ('/' + item.path)}// 如果还有子项,继续递归if (item.children) {getDefaultPath(item.children[0])}}if (item.children) {getDefaultPath(item.children[0], item)return path}return item.path},handleSelect(key, keyPath) { /* 这里控制左侧导航的显示*/// 把选中路由的子路由保存store//  console.log('mei有错误的', key, this.routes)const route = this.routes.find(item => item.path === key)this.$store.commit('permission/SET_CURRENT_ROUTES', route)this.setSidebarHide(route)},// 设置侧边栏的显示和隐藏setSidebarHide(route) {if (!route.children || route.children.length === 1) {this.$store.dispatch('app/toggleSideBarHide', true)} else {this.$store.dispatch('app/toggleSideBarHide', false)}},async logout() {await this.$store.dispatch('user/logout')this.$router.push(`/login?redirect=${this.$route.fullPath}`)},toggleSideBar() {this.$store.dispatch('app/toggleSideBar')}}
}
</script><style scoped lang="scss">.hamburger-container {line-height: 56px;height: 100%;float: left;cursor: pointer;transition: background .3s;-webkit-tap-highlight-color:transparent;fill: #bfcbd9;&:hover {background: rgba(0, 0, 0, .025)}}
</style>

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

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

相关文章

名词解释之EID和SR

大家在聊辅助驾驶时&#xff0c;经常会发现有名词叫SR&#xff0c;或者EID&#xff0c;理想的环境感知界面叫EID&#xff0c;而其他很多车型里大家管那个界面叫SR。我们下面具体看下这两个词具体指什么。 SR是“Situational Awareness”的缩写,意思是环境感知或场景认知。 SR系…

【JMeter】配置元件

1. 元件的分类 HTTP Request Default 作用&#xff1a; 可以配置成通用的信息&#xff0c;可复用 ​​​​​​​ JDBC Connection Configuration 作用&#xff1a;连接数据库 前提&#xff1a; 下载好对应数据类型的jar包 ​​​​​​​ HTTP Header Manager信息头管理…

微信小程序推送服务号消息(一)【Go+微信小程序+微信服务号+微信开放平台】

一、需求场景 业务需要给微信小程序用户在某些场景推送微信服务号消息&#xff0c;例如&#xff1a;订单即将超时&#xff0c;电子合同签约超时等&#xff1b; 二、开发准备 1、开通微信服务号 入口&#xff1a;微信公众平台 1.1 在服务号中获取推送消息所需的配置信息&#…

免费部署开源大模型 ChatGLM-6B

参考&#xff1a;【大模型-第一篇】在阿里云上部署ChatGLM3-CSDN博客 ChatGLM 是一个开源的、支持中英双语的对话语言模型&#xff0c;由智谱 AI 和清华大学 KEG 实验室联合发布&#xff0c;基于 General Language Model (GLM) 架构&#xff0c;具有 62 亿参数。ChatGLM3-6B 更…

基于JavaWeb+SSM+Vue校园综合服务小程序系统的设计和实现

基于JavaWebSSMVue校园综合服务小程序系统的设计和实现 源码获取入口Lun文目录前言主要技术系统设计功能截图订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 源码获取入口 Lun文目录 摘 要 I Abstract II 第一章 绪 论 1 1.1选题背景 2 1.2研究现状 3 1.3研究内容 …

易基因: MeRIP-seq等从m6A RNA甲基化角度揭示NFATc1对破骨细胞的调控机制|研究速递

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。 双膦酸盐类药物是强效骨吸收抑制剂&#xff0c;是治疗骨质疏松症、多发性骨髓瘤、骨转移等疾病的首选药物。这些药物通过抑制甲羟戊酸通路和促进破骨细胞凋亡来促进骨吸收。双膦酸盐类药…

使用jenkins和tomcat创建并部署maven项目

准备三台服务器&#xff1a; 192.168.58.139 部署tomcat 详细参照&#xff1a;http://t.csdnimg.cn/Yp2z2 192.168.58.140 部署gitlab 详细参照&#xff1a;http://t.csdnimg.cn/Sb1uz 192.168.58.153 部署Jenkins 详细参照…

P8A005-A008系统加固

系统账户数据库安全 预备知识】 数据库研究跨越于计算机应用、系统软件和理论三个领域&#xff0c;其中应用促进新系统的研制开发&#xff0c;新系统带来新的理论研究&#xff0c;而理论研究又对前两个领域起着指导作用。 【实验步骤】 网络拓扑&#xff1a;server2008-bas…

【Unity基础】8.简单场景的搭建

【Unity基础】8.简单场景的搭建 大家好&#xff0c;我是Lampard~~ 欢迎来到Unity基础系列博客&#xff0c;所学知识来自B站阿发老师~感谢 &#xff08;一&#xff09;场景资源 &#xff08;1&#xff09;Import资源包 今天我们将手动去搭一个简单的场景&#xff0c;当…

08_Collection集合2

List 集合 特点与方法 List 系列集合&#xff1a;添加的元素是有序、可重复、有索引 import java.util.ArrayList; import java.util.List;public class Test {public static void main(String[] args) {// 1. 创建一个 ArrayList 集合对象List<String> lst new Arra…

IP-Adapter:文本兼容图像提示适配器,用于文本到图像扩散模型

IP-Adapter这是一种有效且轻量级的适配器&#xff0c;用于实现预训练文本到图像扩散模型的图像提示功能。只有 22M 参数的 IP 适配器可以实现与微调图像提示模型相当甚至更好的性能。IP-Adapter 不仅可以推广到从同一基本模型微调的其他自定义模型&#xff0c;还可以推广到使用…

软件工程理论与实践 (吕云翔)第十四章 软件维护与软件工程管理课后习题与解析

第十四章 软件维护与软件工程管理 1.判断题 &#xff08;1&#xff09;代码行技术是比较简单的定量估算软件规模的方法。(√) &#xff08;2&#xff09;功能点技术依据对软件信息域特性和软件复杂性的评估结果&#xff0c;估算软件规模。&#xff08;√&#xff09; &#…

前端js优化表单中单个输入框的回车提交事件

前提 当表单内只有一个input输入框时&#xff0c;即使表单没有submit按钮&#xff0c;在输入框内按下回车键就会触发表单的提交事件。这可能会导致一些意外的行为&#xff0c;特别是当用户不希望提交表单时。 为了解决这个问题&#xff0c;我们可以采取以下两种优化方法&…

机器学习(1)机器学习类型和机器学习的主要概念

0.前提 深度学习&#xff08;Deep Learing&#xff09;是机器学习&#xff08;Machine Learning&#xff09;领域中的一个新的研究方向&#xff0c;在如今的时代研究深度学习的大模型是十分热门的。我不知道有多少人有关注到最近openai的事件啊&#xff0c;说个比较让我惊讶的…

03、K-means聚类实现步骤与基于K-means聚类的图像压缩(1)

03、K-means聚类实现步骤与基于K-means聚类的图像压缩&#xff08;1&#xff09; 03、K-means聚类实现步骤与基于K-means聚类的图像压缩&#xff08;1&#xff09; 03、K-means聚类实现步骤与基于K-means聚类的图像压缩&#xff08;2&#xff09; 开始学习机器学习啦&#xf…

解决:ModuleNotFoundError: No module named ‘PyQt5‘

解决&#xff1a;ModuleNotFoundError: No module named ‘PyQt5’ 文章目录 解决&#xff1a;ModuleNotFoundError: No module named PyQt5背景报错问题报错翻译报错位置代码报错原因解决方法安装PyQt5在PyCharm中配置PyQt5对于新项目对于已有项目 今天的分享就到此结束了 背景…

【序列推荐】MAN:跨领域顺序推荐的混合注意网络

#论文题目&#xff1a;MAN&#xff1a;Mixed Attention Network for Cross-domain Sequential Recommendation&#xff08;跨领域顺序推荐的混合注意网络&#xff09; #论文地址&#xff1a;https://dl.acm.org/doi/10.1145/3543507.3583278 #论文源码开源地址&#xff1a;http…

Docker可视化工具Portainer(轻量)或者Docker容器监控之 CAdvisor+InfluxDB+Granfana(重量)

Docker轻量级可视化工具Portainer 是什么 Portainer 是一款轻量级的应用&#xff0c;它提供了图形化界面&#xff0c;用于方便地管理Docker环境&#xff0c;包括单机环境和集群环境。 安装 官网 https://www.portainer.io/ https://docs.portainer.io/v/ce-2.9/start/instal…

CANdelaStudio 中 Bese Variant 和 Variant区别

关于 Bese Variant &#xff0c;其在 CDDT 和 CDD 文件中都存在&#xff0c;有且只有一个 主要包含三部分&#xff0c;重点只关注 DIDs 和 Supported Diagnostic Classes 而在 CDD 文件中&#xff0c;除了 Bese Variant 外&#xff0c;还有一个 Variant “Variant” 这个概…

minio分布式存储系统

目录 拉取docker镜像 minio所需要的依赖 文件存放的位置 手动上传文件到minio中 工具类上传 yml配置 config类 service类 启动类 测试类 图片 视频 删除minio服务器的文件 下载minio服务器的文件 拉取docker镜像 拉取稳定版本:docker pull minio/minio:RELEASE.20…