首页IT科技vue侧边栏权限(Vue-element-admin平台侧边栏收缩控制问题)

vue侧边栏权限(Vue-element-admin平台侧边栏收缩控制问题)

时间2025-07-11 04:35:43分类IT科技浏览5099
导读:Vue-element-admin平台侧边栏收缩控制...

Vue-element-admin平台侧边栏收缩控制

//找到store/modules/app.js文件 const app = { state: { sidebar: { // opened: !+Cookies.get(sidebarStatus), //原值 opened:true, //默认展开(false是隐藏) withoutAnimation: false }, device: desktop, language: Cookies.get(language) || en, size: Cookies.get(size) || medium }, mutations: { TOGGLE_SIDEBAR: state => { //点击收缩功能触发 // if (state.sidebar.opened) { // Cookies.set(sidebarStatus, 1) // } else { // Cookies.set(sidebarStatus, 0) // } // state.sidebar.opened = !state.sidebar.opened state.sidebar.opened = true state.sidebar.withoutAnimation = false }, CLOSE_SIDEBAR: (state, withoutAnimation) => { //自适应触发 Cookies.set(sidebarStatus,1) state.sidebar.opened = true state.sidebar.withoutAnimation = withoutAnimation } //......后面的就不展示了 }

修改vue-element-admin出现侧边栏与导航栏空白报错

问题描述

根据自己的需求修改导航栏与侧边栏样式                ,修改过程中突然导航栏与侧边栏消失                      ,控制台报红        ,说导航栏与侧边栏的注册出现问题               。

但是            ,原本的注册组件代码我根本没改呀                      ,百度一圈的答案也都是复制黏贴且无法解决我当前的问题

如上图所示            ,进入页面后先报navbar与sidebar注册有问题        ,下面的两行打印是在Layout的index.vue中                      ,mounted打印的元素                        。

之前根本不渲染                ,在添加了console.log语句后侧边与导航渲染时有时无    ,控制台无论这俩组件是否渲染都会报注册组件问题       。

原因分析

代码中不存这俩组件相互调用产生的循环                      ,且组件名称注册使用无误                   ,出现这种情况应该是加载受到了某些因素的影响

通过排查,原来是引入store导致这俩组件加载受到了影响:

原element-admin登录成功后                   ,顶部导航栏没有用户名显示                      ,于是我从store中获取登录的用户名    ,导致整个Layout加载崩溃

错误示范:

Navbar.vue

import store from @/store ...//省略其他组件引用 export default { data(){ return {userName:} }, methods:{ getUserName(){ this.userName = store.getters.name } } }

ps:不管将import store...这行放在组件导入前还是导入后                ,都会影响navbar与sidebar的加载

解决方案

将store引入放在组件加载完毕之后

Navbar.vue

...//省略其他组件引用 export default { data(){ return {userName:} }, mounted(){ this.$nextTick(()=>{ this.getUserName() }) }, methods:{ getUserName(){ const user = require(../../store); this.userName = user.default.getters.name; } } }

以上为个人经验                      ,希望能给大家一个参考        ,也希望大家多多支持本站           。

声明:本站所有文章            ,如无特殊说明或标注                      ,均为本站原创发布                        。任何个人或组织            ,在未征得本站同意时        ,禁止复制                、盗用                      、采集        、发布本站内容到任何网站            、书籍等各类媒体平台           。如若本站内容侵犯了原著者的合法权益                      ,可联系我们进行处理       。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
scatter在python(python中的scatter()函数用法) win10桌面上的网络图标不见了怎么办呢(Windows 10桌面网络图标不见了怎么办)