基于Vue Router和element-ui的LayOut

已于 2024-05-02 10:49:35 修改
阅读量812 收藏 17
点赞数 11
分类专栏： vue 文章标签： vue.js ui 前端
于 2024-05-02 10:48:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a123123sdf/article/details/138388578
版权
本文详细展示了如何在Vue应用中使用ElementUI构建一个具有动态折叠侧边栏、菜单分组和面包屑导航的功能，通过JSON数据驱动菜单结构。
摘要由CSDN通过智能技术生成

一、展示

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

二、代码

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
乌鱼鸡汤
关注
  • 11
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-router-layout：用于Vue路由器的轻型布局解析器
02-27
vue-router-layout Vue路由器的轻量级布局解析器。 您可能要使用 ，其中包含有关路由的所有有用功能。 安装 $ npm install vue-router-layout 支持的Vue版本 0.2.0或更高版本仅支持Vue> = 3.0.0。 如果要在Vue v2中使用vue-router-layout，请尝试0.1.x。 概述 通过传递将布局组件解析为createRouterLayout的回调来创建<RouterLayout>组件。 回调将接收到一个布局类型的字符串，并期望返回一个promise来解析一个布局组件。 import { createRouterLayout } from 'vue-router-layout' // Create <RouterLayout> component. const RouterLayout = createRouterLa
element-ui后台管理系统小案例
08-14
Element-UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，它提供了丰富的 UI 组件，如表格、按钮、提示、下拉菜单等，极大地简化了网页开发过程。 在这个小案例中，你可能会学到以下关键知识点：...
vue-router中有layout的布局写法
热门推荐
guochao8的博客
02-18 1万+
路由数据demo export default [ '/', '/activity/application', '/activity/change', '/activity/applicationDetail', '/activity/promotion', '/promotion/reimburse', '/promotion/join', '/promot...
vue 之配置路由 和 layout布局
weixin_47409897的博客
10-11 1万+
目录配置路由router/index.jslayout/index.js 配置路由 router/index.js 基础的路由配置 还有登录权限的配置 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [{ path: "/login", name: "Login", component: () => import("../views/login/L
vue3+ts+vite自适应项目——路由、layout布局
DW14687的博客
05-01 2951
以上就是今天得内容，路由配置，下一章准备将请求~
vue路由配置公共布局layout
god_sword_的博客
07-03 1100
vue路由配置公共布局layout
vue3 路由搭建（包含layout组件）
最新发布
weixin_65116989的博客
11-06 352
下面所需页面需要自己去创建和配置。
element-ui-helper-master.zip
07-10
Element UI Helper Master是一个压缩包，其中包含了用于辅助开发基于Element UI的前端项目的资源和工具。Element UI是一款流行的基于Vue.js的开源组件库，提供了一系列美观、可复用且易于定制的UI组件，常用于构建...
vue-admin:vue后台管理模板-轻量版（已更新vue3.x版本）
04-04
项目描述：基于vue.js + typescript + element-ui编写一套超轻量，可根据实际情况自由地扩展的前端中后台管理基础模板。 vue 2.x | 预览地址 功能清单 layout核心layout模板 vue-router用户权限vue-router管理 svg...
ElementUI离线文档（1.4-2.4）
11-01
ElementUI 是一个基于 Vue.js 的开源前端组件库，它提供了丰富的 UI 组件，适用于构建现代 Web 应用程序。这个离线文档包含了从版本 1.4 到 2.4 的所有 API 和相关文档，对于开发者来说是极其实用的资源。 1. **...
vue3 vite-ts-pinia-elementplus后台管理系统模版
04-28
后台使用vue3+ vite + ts+ pinia+element Plus做的一个管理系统模版开发，下载下来就可以直接开发使用. 项目中使用的ui组件通过vite config按需加载 ts相关配置 修改tsconfig.json 运行项目命令 npm run dev 项目现...
vue项目中vue-router的使用
weixin_43254676的博客
03-03 353
1.安装 npm install vue-router 2.引入 import Vue from ‘vue’ import VueRouter from ‘vue-router’ Vue.use(VueRouter) 3.使用 1.router文件夹下的index.js,以下为基本代码 import Vue from 'vue' import Router from 'vue-router' V...
vue-router基础知识总结
sinat_34626741的博客
05-13 529
背景： vue是构建单页面应用，为了便于切换不同页面功能，因此引入了路由的概念，vue-router是路由管理器。 1、路由模式（vue默认使用hash） hash: 浏览器地址栏中会有 #，改变地址不会给服务器重新发送请求 history: 初次访问和刷新都会发请求(前进、后退不发请求)，若请求不到会报404,所以需要在服务器端配置访问不到资源返回index.html页面。原理是根据html5的history接口,所以只兼容支持html5 history的浏览器 abstract: 用得少，node
Vue-Router-原理实现（17）
5coder的大前端进阶之路-个人博客网站：blog.5coder.cn
06-16 566
Vue-Router 原理实现 摘要： 首先来复习一下Vue-Router的基本使用，模拟实现之前，通过它的基本使用方式来进行分析如何实现。然后再来回顾一下，Hash模式和History模式的区别，演示一下History模式如何去使用，History模式要结合服务器一起来使用。最后再来模拟实现自己的Vue-Router，通过自己来实现一个Vue-Router，通过模拟实现Vue-Router来了解Vue-Router内部的实现原理。 官方文档 1.Vue-Router基本回顾-使用步骤 使用Vue.
vue2.x项目从0到1（一）之路由（后台管理layout布局）
notagoodwriter的博客
01-06 1384
vue2.x项目从0到1之路由（后台管理layout布局）
vue+elementUI后台系统（第六章：路由嵌套与layout布局）
DW14687的博客
08-03 1万+
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 系列文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 在后台系统设计中，经常会使用layout布局以及路由 一、layout布局 首先我们来看一下效果图： 1.引入库 代码如下（示例）： 二、使
Vue3 + Vite + Router + Pinia + Layout 实现动态路由
weixin_44258422的博客
07-04 1625
Vue3 + Vite + Router + Pinia + Layout 实现动态路由
vue动态生成路由及常见问题
Zichen_Lin的博客
10-16 3336
在一些常见的 RBAC 系统中，对于角色和权限的管理是极其重要的。一个人可以拥有多个`角色`，而一个角色又会被赋予多个`权限`。不同的角色在登录后台系统后，看到的系统菜单也是不同的。在前后端不分离的项目中，后端可以整合 `Spring Security`、`Shiro`等安全框架对页面元素进行标签化管理。但是随着前后分离模式的普及，我们现常常把展示逻辑放到前端来完成。本文就详细聊一聊在 vue 中如何实现对于菜单的动态控制。
vue3-admin-element-template
08-09
Vue3-Admin-Element-Template是一个基于Vue3和Element Plus的权限路由模板。根据不同身份，它可以显示不同的侧边栏导航栏。根据引用和引用的内容，如果你要修改权限路由，你需要修改以下几个文件：src/permission.js, src/store/modules/permission.js, src/store/modules/user.js, src/store/getters.js, src/store/index.js, src/router/index.js, src/Layout/components/Sidebar/index.vue。如果你使用的还是Element UI而不是Element Plus，请确保在代码中正确引入Element UI组件（例如ElMessage）。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值