vue element框架中侧边导航栏显示不全问题

最新推荐文章于 2024-07-24 16:01:45 发布
最新推荐文章于 2024-07-24 16:01:45 发布
阅读量3.6k 收藏 3
点赞数 3
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： sass 前端框架 vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_46872379/article/details/120173670

今天在写项目的时候遇到这个问题，侧边导航栏在浏览器正常大小下显示不全（帮助中心为导航栏的父级菜单），检查路由配置和权限分配，都没有错，如下图

 

导航栏左边的滚动条拉到底还是不显示，但是把界面缩小就能显示，如下图：

查看样式找到相应组件才看到高度被隐藏了

赶紧找到公共样式里的相应id的样式修改为 

 

这样，在正常大小的浏览器界面也能显示完全

使用el-menu做侧边栏导航遇到需要点击两次菜单才展开
qq_37635012的博客
06-27 2059
如上图，在我第一次点击选中“告警管理”这个菜单的时候，外联监测它会立马收缩起来，当我第二次点击时就不会收缩，而是展开状态，这是因为我的el-menu里default-active和el-submenu的index及el-menu-item的index属性不一致导致的，
Vue + element-ui 【前端项目一】控制某个页面不显示导航栏 4
wgchen
09-30 1638
Vue + element-ui 【前端项目一】控制某个页面不显示导航栏 4
vue-element-admin的左侧路由栏最后一个路由显示不全
jjsmida1的博客
05-17 815
问题如下图 解决方法：找到src\layout\components\Sidebar\index.vue 在el-menu中添加style=“padding-bottom:20px"。如下图 <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="variables.menuBg" :text-color="vari
vue-element-admin的左边菜单栏没有显示数据
LJAVAI的博客
10-15 1252
使用vue-element-admin左侧菜单栏没有显示数据
vue3+element plus tabs 标签页太多不能完整显示
cyb2473541293的博客
07-24 677
style scoped>内。在标签里面增加。
vue element-ui侧边栏撑满全屏且不加滚动条
nannantang的博客
04-30 1134
element-ui侧边栏导航
vue+element导航栏高亮显示的解决方式
10-16
在构建基于Vue.js的Web应用时，经常需要使用Element UI框架提供的导航栏组件来创建页面顶部的菜单导航。...以上介绍的解决方案简单有效，可以解决在使用Vue.js结合Element UI框架时导航栏高亮显示常见的问题。
基于element ui VUE 2 VUE router的侧边导航栏以及顶部路由历史记录的组件
syc123syc123syc的博客
09-19 2071
app.vue（下面这些样式是我自己为了方便写的，也可以创建一个css文件单独放），这里主要是引入这两个自定义组件，搭配el-container（element ui里的一个很好用的布局组件）使用,如果有登录页面的话就用vue挂载一个登录状态v-if判断一下el-container和登录组件使用哪个就可以啦。换了个新公司搬砖，环境比以前好了干活都开心，最近有个后台要写想了想以后重复写这几个组件挺麻烦的就干脆搞了几个可复用组件,以下的内容就拿我这个新项目示例吧，直接贴代码啦。还有topView.vue。
Vue3.0 + Element Plus｜ 侧边导航栏、标题栏组件应用全局
StellaXiao98的博客
07-20 5038
刚开始接触项目，从0开始搭建管理平台，最开始先写的页面布局，采用的很笨的方法：每写一个页面就写一次页面布局样式 <el-container> <el-aside style="width: auto" v-if="$route.meta.keepAlive"> <keep-alive> <!-- 封装好的侧边导航栏组件 --> <com-sidebar ></com-side
vue elementUI使用tabs与导航栏联动
01-21
但我们想在点击导航栏时在tabs中映射相应的组件，这就需要使用tabs组件 在slider.vue中点击路由后，把当前选择的路由@select使用bus传出去 <el-menu class=sidebar-el-menu :default-active=onRoutes :collapse=...
vue-element-admin只有一个子路由，不显示侧边栏
yttqq的博客
02-17 1487
vue-element-admin只有一个子路由，不显示侧边栏
Vue左侧菜单栏显示问题
confidence冯瑶的博客
12-08 421
【代码】Vue左侧菜单栏显示问题。
vue-element-admin 跳转详情页，添加面包屑，侧边栏不显示
曳猫的博客
08-03 2731
侧边栏无显示，添加面包屑。
element-plus导航不跳转的解决办法
walkertc的博客
03-19 1450
之后发现点击并没有什么变化，这是因为没有将属性。即可实现跳转（当然你得先配置好路由）
elementui 容器布局，el-header/el-footer在组件内显示不正常
热门推荐
有问题可关注公众号：前端研究院 后台输入问题回复
04-08 1万+
用elementui布局，怎么导航啊，左侧菜单啊就左右排列了，类似下图 入口 <template> <el-container direction="vertical"> <OutLayoutHeader></OutLayoutHeader> <el-container direction="vertical"&...
修改vue-element-admin出现侧边栏与导航栏空白报错
weixin_43939111的博客
07-19 1316
vue-element-admin添加用户名显示
element ui 菜单收缩
jiaoqi6132的博客
07-01 3142
<template> <div> <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;"> <el-radio-button :label="false">展开</el-radio-button> <el-radio-button :label="true">收起</el-radio-button> &..
Element-ui 在使用侧边栏时，且包含头部导航时，高度无法占满
qianfenghua的博客
06-17 969
解决Element-ui 在使用侧边栏时，且包含头部导航时，高度无法占满。
记录学习碰到的问题：element UI导航菜单高度不能铺满问题
璐先生的博客
07-31 7562
在这里插入代码片@TOC 学vue+element时候发现导航菜单不能铺满浏览器 通过最外层加个div，并把每一层高度设成100%，解决此问题 最后效果 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区
vue+element侧边菜单导航栏如何配置路由和写vue组件
最新发布
03-26
<think>嗯，用户想了解如何在Vue项目中使用Element UI实现侧边菜单导航栏，并配置路由和组件。首先，我需要回忆一下Element UI的组件库，特别是菜单部分。记得Element UI有el-menu组件，可以用来做侧边栏导航。然后，路由配置方面，Vue Router是必须的，需要嵌套路由和动态路由吗？ 用户提到了引用中的内容，比如静态展示和commonAside组件。可能需要先创建菜单组件，用el-menu-item和el-submenu来构建层级结构。然后，路由配置部分，应该在router/index.js里定义路由，尤其是children属性来实现嵌套。 另外，引用里提到main.vue使用了Container布局容器，所以布局方面可能需要el-container、el-aside和el-main组件。侧边栏放在el-aside里，主内容区用el-main作为路由出口。 还有，菜单的点击事件需要绑定路由跳转，可能用Vue Router的push方法。动态菜单数据的话，可能需要从vuex或者计算属性获取，根据路由配置生成菜单项。可能需要处理有子菜单和无子菜单的情况，用v-if或者计算属性来判断。 步骤大概是：安装依赖、创建布局组件、配置路由、编写菜单组件、绑定路由跳转。然后还要考虑菜单的高亮状态，用router-link-active类或者el-menu的default-active属性。可能需要动态设置default-active，根据当前路由路径。 示例代码部分，需要展示main.vue的结构，包括el-container，el-aside引入commonAside，el-main放router-view。commonAside组件里用el-menu，遍历路由信息生成菜单项，用index属性绑定路由路径，处理点击事件用$router.push。 最后，要检查是否需要嵌套路由，子路由的配置是否正确，以及菜单项如何根据路由配置动态生成。可能还需要处理图标和样式，但用户主要关注功能和路由配置，所以示例代码可以简化样式部分。 用户可能遇到的问题包括路由不匹配、菜单高亮不正确、点击菜单没反应，这些都需要在步骤中说明如何处理，比如确保路由路径正确，使用vue-router的方法导航，设置默认激活的菜单项。 总结下来，步骤是安装Element UI和Vue Router，创建布局组件，配置路由信息，编写动态菜单组件绑定路由，处理点击事件和高亮状态。示例代码需要覆盖这些方面，并确保语法正确。</think>以下是在Vue项目中使用Element UI实现侧边菜单导航栏的完整实现步骤： ### 一、基础环境搭建 1. 安装依赖 ```bash npm install element-plus vue-router ``` ### 二、布局组件实现 ```vue <!-- main.vue --> <template> <el-container> <el-aside width="200px"> <common-aside :menuData="menuList" /> </el-aside> <el-main> <router-view /> </el-main> </el-container> </template> <script> import CommonAside from './components/CommonAside.vue' export default { computed: { menuList() { return this.$router.options.routes } }, components: { CommonAside } } </script> ``` ### 三、菜单组件开发 ```vue <!-- CommonAside.vue --> <template> <el-menu :default-active="$route.path" router unique-opened > <template v-for="item in menuData"> <el-submenu v-if="item.children && item.children.length" :index="item.path" :key="item.path" > <template #title> <i :class="item.meta.icon"></i> <span>{{ item.meta.title }}</span> </template> <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path" > {{ child.meta.title }} </el-menu-item> </el-submenu> <el-menu-item v-else :index="item.path" :key="item.path" > <i :class="item.meta.icon"></i> <span>{{ item.meta.title }}</span> </el-menu-item> </template> </el-menu> </template> <script> export default { props: { menuData: { type: Array, default: () => [] } } } </script> ``` ### 四、路由配置示例 ```javascript // router/index.js const routes = [ { path: '/', component: () => import('@/views/main.vue'), children: [ { path: '/dashboard', name: 'Dashboard', meta: { title: '仪表盘', icon: 'el-icon-monitor' }, component: () => import('@/views/Dashboard.vue') }, { path: '/user', meta: { title: '用户管理', icon: 'el-icon-user' }, children: [ { path: 'list', name: 'UserList', meta: { title: '用户列表' }, component: () => import('@/views/user/List.vue') } ] } ] } ] ``` ### 五、核心实现要点 1. **路由联动**：通过`router`属性开启vue-router模式，菜单项的index值自动匹配路由路径[^3] 2. **动态激活**：`default-active`绑定`$route.path`实现菜单状态同步[^4] 3. **嵌套处理**：使用`el-submenu`配合路由的children配置实现多级菜单[^1] 4. **数据驱动**：通过计算属性获取路由配置生成菜单结构[^2]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值