基于Vue Router和element-ui的LayOut

一、展示

在这里插入图片描述
在这里插入图片描述

二、代码

app.vue

<template>
    <div id="app">
        <el-container style="border: 1px solid #eee; height: 100vh">
            <el-aside  v-bind:width="asideWidth" style="background-color: rgb(48, 65, 86);">
                <el-menu :router="true" class="el-menu-vertical-demo" style="width: 200px; border: none"
                         @open="handleOpen"
                         @close="handleClose"
                         @select="handleSelect"
                         :collapse-transition="false"
                         :collapse="isCollapse"
                         background-color="#304156"
                         text-color="#fff"
                         active-text-color="#ffd04b">
                    <el-menu-item index="/">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">XXX系统</span>
                    </el-menu-item>

                    <el-submenu :index="item.path" v-for="(item,index) in menu"  v-if="item.children!=null">
                        <template slot="title" v-if="item.component==='Layout' && item.children!=null">
                            <i :class="item.meta.icon"></i>
                            <span slot="title">{{item.meta.title}}</span>
                        </template>
                        <el-menu-item-group v-if="item.children!=null">
                            <el-menu-item :index="c.component" v-for="(c,i) in item.children"
                                          v-if="c.component!=='ParentView'">
                                <i :class="c.meta.icon"></i>{{c.meta.title}}
                            </el-menu-item>
                        </el-menu-item-group>

                        <el-submenu :index="p.path" v-for="(p,i) in item.children" v-if="p.component==='ParentView'">
                            <span slot="title">{{p.meta.title}}</span>
                            <el-menu-item :index="c.component" v-for="(c,i) in p.children">{{c.meta.title}}
                            </el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item :index="item.path" v-for="(item,index) in menu" v-if="item.children==null">
                        <i :class="item.meta.icon"></i>
                        <span slot="title">{{item.meta.title}}</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header style="font-size: 12px;background-color:#FFFFFF; padding: 0;height: auto">
                    <el-row style="-webkit-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); ">
                        <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1" style="text-align: left;">
                            <span v-on:click="launch"><i style="font-size: 25px;line-height: 60px"
                                                         :class="launchIcon"></i></span>
                        </el-col>
                        <el-col :xs="19" :sm="19" :md="19" :lg="18" :xl="19">
                            <el-breadcrumb separator="/" style="line-height: 60px;">
                                <el-breadcrumb-item v-for="(item,index) in thisBreadcrumb">
                                    <a :href="item.path">{{item.title}}</a>
                                </el-breadcrumb-item>
                            </el-breadcrumb>
                        </el-col>
                        <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4" style="text-align: right;">
                            <span>王小虎</span>
                            <el-dropdown>
                                <i class="el-icon-setting" style="margin-left: 15px"></i>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>查看</el-dropdown-item>
                                    <el-dropdown-item>新增</el-dropdown-item>
                                    <el-dropdown-item>删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </el-col>
                    </el-row>
                    <el-row style="padding: 3px 0;border-bottom: 1px solid #d8dce5;
                     -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
                     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);">
                        <div style="line-height: 0">
                            <el-tag style="border-radius: 0;margin-left: 10px;"
                                    key="1"
                                    closable
                                    :disable-transitions="true"
                                    type=""
                                    effect="dark"
                                    @close="handleCloseTag(1)">
                                首页
                            </el-tag>
                            <el-tag style="margin-left: 15px;border-radius: 0;"
                                    key="2"
                                    closable
                                    :disable-transitions="true"
                                    type="info"
                                    @close="handleCloseTag(2)">
                                关于
                            </el-tag>
                        </div>
                    </el-row>
                </el-header>
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }

    a {
        color: #FFFFFF;
        text-decoration: none
    }
    body{
        padding: 0;
        margin: 0;
    }
</style>

<script>
    export default {
        data() {
            //这个对象一般从后端获取，菜单会存在数据库，动态获取
            const menuObj = [
                {
                    "name": "System",
                    "path": "/system",
                    "hidden": false,
                    "redirect": "noRedirect",
                    "component": "Layout",
                    "alwaysShow": true,
                    "meta": {
                        "title": "系统管理",
                        "icon": "el-icon-s-tools",
                        "noCache": false,
                        "link": null
                    },
                    "children": [
                        {
                            "name": "User",
                            "path": "user",
                            "hidden": false,
                            "component": "system/user/index",
                            "meta": {
                                "title": "用户管理",
                                "icon": "el-icon-s-check",
                                "noCache": false,
                                "link": null
                            }
                        },
                        {
                            "name": "Role",
                            "path": "role",
                            "hidden": false,
                            "component": "system/role/index",
                            "meta": {
                                "title": "角色管理",
                                "icon": "peoples",
                                "noCache": false,
                                "link": null
                            }
                        },
                        {
                            "name": "Menu",
                            "path": "menu",
                            "hidden": false,
                            "component": "system/menu/index",
                            "meta": {
                                "title": "菜单管理",
                                "icon": "tree-table",
                                "noCache": false,
                                "link": null
                            }
                        },
                        {
                            "name": "Dept",
                            "path": "dept",
                            "hidden": false,
                            "component": "system/dept/index",
                            "meta": {
                                "title": "部门管理",
                                "icon": "tree",
                                "noCache": false,
                                "link": null
                            }
                        },
                        {
                            "name": "Post",
                            "path": "post",
                            "hidden": false,
                            "component": "system/post/index",
                            "meta": {
                                "title": "岗位管理",
                                "icon": "post",
                                "noCache": false,
                                "link": null
                            }
                        },
                        {
                            "name": "Dict",
                            "path": "dict",
                            "hidden": false,
                            "component": "system/dict/index",
                            "meta": {
                                "title": "字典管理",
                                "icon": "dict",
                                "noCache": false,
                                "link": null
                            }
                        },
                        {
                            "name": "Config",
                            "path": "config",
                            "hidden": false,
                            "component": "system/config/index",
                            "meta": {
                                "title": "参数设置",
                                "icon": "edit",
                                "noCache": false,
                                "link": null
                            }
                        },
                        {
                            "name": "Notice",
                            "path": "notice",
                            "hidden": false,
                            "component": "system/notice/index",
                            "meta": {
                                "title": "通知公告",
                                "icon": "message",
                                "noCache": false,
                                "link": null
                            }
                        },
                        {
                            "name": "Log",
                            "path": "log",
                            "hidden": false,
                            "redirect": "noRedirect",
                            "component": "ParentView",
                            "alwaysShow": true,
                            "meta": {
                                "title": "日志管理",
                                "icon": "log",
                                "noCache": false,
                                "link": null
                            },
                            "children": [
                                {
                                    "name": "Operlog",
                                    "path": "operlog",
                                    "hidden": false,
                                    "component": "monitor/operlog/index",
                                    "meta": {
                                        "title": "操作日志",
                                        "icon": "form",
                                        "noCache": false,
                                        "link": null
                                    }
                                },
                                {
                                    "name": "Logininfor",
                                    "path": "logininfor",
                                    "hidden": false,
                                    "component": "monitor/logininfor/index",
                                    "meta": {
                                        "title": "登录日志",
                                        "icon": "logininfor",
                                        "noCache": false,
                                        "link": null
                                    }
                                }
                            ]
                        }
                    ]
                },
                {
                    "name": "Http://ruoyi.vip",
                    "path": "/about",
                    "hidden": false,
                    "component": "Layout",
                    "meta": {
                        "title": "关于",
                        "icon": "el-icon-question",
                        "noCache": false,
                        "link": "http://ruoyi.vip"
                    }
                }
            ]
            return {
                pathMap: {},
                thisBreadcrumb: [{"path": "/", "title": "首页"}],
                menu: menuObj,
                isCollapse: false,
                asideWidth: '200px',
                launchIcon: 'el-icon-s-fold'
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                // console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                // console.log(key, keyPath);
            },
            handleSelect(key, keyPath) {
                // console.log(key, keyPath);
                this.thisBreadcrumb =[{"path": "/", "title": "首页"}]
                if (keyPath.length > 0) {
                    const f = keyPath[0]
                    const e = keyPath[keyPath.length - 1]
                    // console.log(this.pathMap.get(f).get(e))
                    const paths = this.pathMap.get(f).get(e)
                    paths.forEach((path => {
                        let item = {}
                        item.path = '/'
                        item.title = path
                        this.thisBreadcrumb.push(item)
                    }))
                }
            },
            //展开左侧导航
            launch() {
                if (this.isCollapse) {
                    //展开
                    this.isCollapse = false;
                    this.asideWidth = '200px'
                    this.launchIcon = 'el-icon-s-fold'
                } else {
                    //收起
                    this.isCollapse = true;
                    this.asideWidth = '64px'
                    this.launchIcon = 'el-icon-s-unfold'
                }
            },
            handleCloseTag(tag) {
                console.log(tag)
            },
            filterMenuPaths(menu, map, fatherPaths) {
                //有children
                // console.log("e->" + fatherPaths)
                // if (menu.component==='Layout'){
                //
                // }
                let paths = []
                if (menu.children != null && menu.children.length >= 1) {
                    menu.children.forEach((el) => {
                        let fatherNow = [];
                        fatherNow = fatherNow.concat(fatherPaths)
                        fatherNow.push(menu.meta.title)
                        this.filterMenuPaths(el, map, fatherNow)
                    })
                } else { //没有有children
                    paths = paths.concat(fatherPaths)
                    paths.push(menu.meta.title)
                    map.set(menu.component, paths)
                }
            }
        },
        created: function () {
            this.pathMap = new Map();
            this.menu.forEach((m, index) => {
                let map = new Map();
                this.filterMenuPaths(m, map, [])
                this.pathMap.set(m.path, map)
            })
        }
    };
</script>

router

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    //组件自己创建
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: function () {
      //视图自己创建
      return import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
    }
  }
]

const router = new VueRouter({
  routes
})

export default router

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

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

相关文章

基于ROS从零开始构建自主移动机器人：仿真和硬件

基于ROS从零开始构建自主移动机器人：仿真和硬件

书籍&#xff1a;Build Autonomous Mobile Robot from Scratch using ROS&#xff1a;Simulation and Hardware 作者&#xff1a;Rajesh Subramanian 出版&#xff1a;Apress 书籍下载-《基于ROS从零开始构建自主移动机器人&#xff1a;仿真和硬件》您将开始理解自主机器人发…
阅读更多...
ip地址与硬件地址的区别是什么

ip地址与硬件地址的区别是什么

在数字世界的浩瀚海洋中&#xff0c;每一台联网的设备都需要一个独特的标识来确保信息的准确传输。这些标识&#xff0c;我们通常称之为IP地址和硬件地址。虽然它们都是用来识别网络设备的&#xff0c;但各自扮演的角色和所处的层次却大相径庭。虎观代理小二将带您深入了解IP地…
阅读更多...
karpathy make more -- 4

karpathy make more -- 4

1 Introduction 这个部分要完成一个网络的模块化&#xff0c;然后实现一个新的网络结构。 2 使用torch的模块化功能 2.1 模块化 将输入的字符长度变成8&#xff0c;并将之前的代码模块化 # Near copy paste of the layers we have developed in Part 3# -----------------…
阅读更多...
爬虫学习：基本网络请求库的使用

爬虫学习：基本网络请求库的使用

目录 一、urllib网络库 1.urlopen()方法 2.request方法 二、requests网络请求库 1.主要方法 2.requests.get()和requests.post() 一、urllib网络库 1.urlopen()方法 语法格式&#xff1a; urlopen(url,data,timeout,cafile,capath,context) # url:地址 # data:要提交的数据…
阅读更多...
[华为OD]C卷 机场航班调度 ，XX市机场停放了多架飞机，每架飞机都有自己的航班号100

[华为OD]C卷 机场航班调度 ，XX市机场停放了多架飞机，每架飞机都有自己的航班号100

题目&#xff1a; XX市机场停放了多架飞机&#xff0c;每架飞机都有自己的航班号CA3385, CZ6678, SC6508 等&#xff0c;航班号的前2个大写字母&#xff08;或数字&#xff09;代表航空公司的缩写&#xff0c;后面4个数字代表航班信息。 但是XX市机场只有一条起飞用跑道&am…
阅读更多...
uniapp源码+计划任务 台股平台源码 新股申购 分类后台控制

uniapp源码+计划任务 台股平台源码 新股申购 分类后台控制

台股平台源码集成了新股申购与折扣申购功能&#xff0c;结合了计划任务和UniApp源码&#xff0c;为用户提供了一个全面的股票交易解决方案。 经过初步测试&#xff0c;系统可正常运行。测试时没有配置计划任务和WebSocket 。有兴趣的自行研究。 本系统基于PHP 7.3版本开发&am…
阅读更多...
【记录】Springboot项目集成docker实现一键部署

【记录】Springboot项目集成docker实现一键部署

公司管理平台完成后&#xff0c;为了方便其他不懂开发的同事部署和测试&#xff0c;集成docker进行一键部署&#xff0c;也为后面自动化部署做准备。本文做个简单记录。 1、安装docker yum install https://download.docker.com/linux/fedora/30/x86_64/stable/Packages/cont…
阅读更多...
maven插件：dockerfile-maven-plugin和docker-maven-plugin

maven插件：dockerfile-maven-plugin和docker-maven-plugin

Maven插件dockerfile-maven-plugin和docker-maven-plugin都是为Java开发人员提供了一种便捷的方式&#xff0c;通过Maven构建流程来自动化创建、管理和推送Docker镜像。虽然它们有着相似的目标&#xff0c;即集成Docker与Maven项目&#xff0c;但这两个插件在实现细节、功能侧重…
阅读更多...
嵌入式全栈开发学习笔记---C语言笔试复习大全3

嵌入式全栈开发学习笔记---C语言笔试复习大全3

目录 笔试题3 笔试题4 笔试题5 上一篇介绍了数据类型的长度和数据范围&#xff0c;并且分别讲解了两个经典的笔试题&#xff0c;这一篇我们再来看三道非常经典的考数据类型长度、数据范围和数据类型转换的笔试题。 说明&#xff1a;我们学过单片机的一般都是有C语言基础的了…
阅读更多...
Flask路由的使用

Flask路由的使用

Flask 是一个轻量级的 Python Web 框架&#xff0c;其简洁的设计使得构建 Web 应用变得轻而易举。其中&#xff0c;路由是 Flask 中至关重要的一部分&#xff0c;它定义了 URL 与视图函数之间的映射关系&#xff0c;决定了用户请求的处理方式。在本文中&#xff0c;我们将深入探…
阅读更多...
vue3项目引入VueQuill富文本编辑器（成功）及 quill-image-uploader 图像模块（未成功）

vue3项目引入VueQuill富文本编辑器（成功）及 quill-image-uploader 图像模块（未成功）

tip&#xff1a;重点解释都写在代码注释里了&#xff0c;方便理解&#xff0c;所以看起来比较密集 富文本基本使用 项目文件夹路径安装依赖 npm install vueup/vue-quilllatest --save 全局注册&#xff1a;main.js // main.js// 自己项目的一些配置&#xff08;只放了主要…
阅读更多...
【C语言】文件操作（万字解读超详细解析）

【C语言】文件操作（万字解读超详细解析）

最好的时光&#xff0c;在路上;最好的生活&#xff0c;在别处。独自上路去看看这个世界&#xff0c;你终将与最好的自己相遇。&#x1f493;&#x1f493;&#x1f493; 目录 • ✨说在前面 &#x1f34b;知识点一&#xff1a;什么是文件&#xff1f; • &#x1f330;1.程序…
阅读更多...
【项目学习01_2024.05.01_Day03】

【项目学习01_2024.05.01_Day03】

学习笔记 3.6 开发业务层3.6.1 创建数据字典表3.6.2 编写Service3.6.3 测试Service 3.7 接口测试3.7.1 接口完善3.7.2 Httpclient测试 3.8 前后端联调3.8.1 准备环境3.8.2 安装系统管理服务3.8.3 解决跨域问题解决跨域的方法&#xff1a;我们准备使用方案2解决跨域问题。在内容…
阅读更多...
模方试用版水面修整，调整水岸线功能进程缓慢该怎么解决？

模方试用版水面修整，调整水岸线功能进程缓慢该怎么解决？

答&#xff1a;水面修整&#xff0c;第一个点选取准确的高程位置和水边&#xff0c;其他点就可以包含整个水面范围就行&#xff0c;可以绘制大一些。上图绘制区域没有包含到所有的水面&#xff0c;可以尝试下图的红线绘制区域。 模方是一款针对实景三维模型的冗余碎片、水面残缺…
阅读更多...
使用Neo4j和Langchain创建知识图谱

使用Neo4j和Langchain创建知识图谱

使用Neo4j和Langchain创建知识图谱 知识图谱是组织和整合信息的强大工具。通过使用实体作为节点和关系作为边缘&#xff0c;它们提供了一种系统的知识表示方法。这种有条理的表示有利于简化查询、分析和推理&#xff0c;使知识图在搜索引擎、推荐系统、自然语言处理和人工智能…
阅读更多...
Docker：centos7安装docker

Docker：centos7安装docker

官网&#xff1a;https://www.docker.com/官网 文档地址 - 确认centos7及其以上的版本 查看当前系统版本 cat /etc/redhat-release- 卸载旧版本 依照官网执行 - yum安装gcc相关 yum -y install gccyum -y install gcc-c- 安装需要的软件包 yum install -y yum-utils- 设置s…
阅读更多...
Java 基础重点知识-(泛型、反射、注解、IO)

Java 基础重点知识-(泛型、反射、注解、IO)

文章目录 什么是泛型? 泛型有什么用?泛型原理是什么? Java 反射什么是反射? 反射作用是什么?动态代理有几种实现方式? 有什么特点? Java 注解什么是注解, 作用是什么? Java I/O什么是序列化?Java 是怎么实现系列化的?常见的序列化协议有哪些?BIO/NIO/AIO 有什么区别…
阅读更多...
可靠的Mac照片恢复解决方案

可靠的Mac照片恢复解决方案

当您在搜索引擎搜索中输入“Mac照片恢复”时&#xff0c;您将获得数以万计的结果。有很多Mac照片恢复解决方案声称他们可以在Mac OS下恢复丢失的照片。但是&#xff0c;并非互联网上的所有Mac照片恢复解决方案都可以解决您的照片丢失问题。而且您不应该花太多时间寻找可靠的Mac…
阅读更多...
数据库（MySQL）—— DQL语句（聚合，分组，排序，分页）

数据库（MySQL）—— DQL语句（聚合，分组，排序，分页）

数据库&#xff08;MySQL&#xff09;—— DQL语句&#xff08;聚合&#xff0c;分组&#xff0c;排序&#xff0c;分页&#xff09; 聚合函数常见的聚合函数语法 分组查询语法 排序查询语法 分页查询语法 DQL的执行顺序 我们今天来继续学习MySQL的DQL语句的聚合和分组查询&…
阅读更多...
PyCharm 2024新版图文安装教程（python环境搭建+PyCharm安装+运行测试+汉化+背景图设置）

PyCharm 2024新版图文安装教程（python环境搭建+PyCharm安装+运行测试+汉化+背景图设置）

名人说&#xff1a;一点浩然气&#xff0c;千里快哉风。—— 苏轼《水调歌头》 创作者&#xff1a;Code_流苏(CSDN) 目录 一、Python环境搭建二、PyCharm下载及安装三、解释器配置及项目测试四、PyCharm汉化五、背景图设置 很高兴你打开了这篇博客&#xff0c;如有疑问&#x…
阅读更多...
最新文章

Copyright @ 2022~2023

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