Vue-element-admin平臺側(cè)邊欄收縮控制問題
Vue-element-admin平臺側(cè)邊欄收縮控制
//找到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 => { //點擊收縮功能觸發(fā)
// 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) => { //自適應(yīng)觸發(fā)
Cookies.set('sidebarStatus',1)
state.sidebar.opened = true
state.sidebar.withoutAnimation = withoutAnimation
}
//......后面的就不展示了
}修改vue-element-admin出現(xiàn)側(cè)邊欄與導(dǎo)航欄空白報錯
問題描述
根據(jù)自己的需求修改導(dǎo)航欄與側(cè)邊欄樣式,修改過程中突然導(dǎo)航欄與側(cè)邊欄消失,控制臺報紅,說導(dǎo)航欄與側(cè)邊欄的注冊出現(xiàn)問題。
但是,原本的注冊組件代碼我根本沒改呀,百度一圈的答案也都是復(fù)制黏貼且無法解決我當前的問題

如上圖所示,進入頁面后先報navbar與sidebar注冊有問題,下面的兩行打印是在Layout的index.vue中,mounted打印的元素。
之前根本不渲染,在添加了console.log語句后側(cè)邊與導(dǎo)航渲染時有時無,控制臺無論這倆組件是否渲染都會報注冊組件問題。
原因分析
代碼中不存這倆組件相互調(diào)用產(chǎn)生的循環(huán),且組件名稱注冊使用無誤,出現(xiàn)這種情況應(yīng)該是加載受到了某些因素的影響
通過排查,原來是引入store導(dǎo)致這倆組件加載受到了影響:
原element-admin登錄成功后,頂部導(dǎo)航欄沒有用戶名顯示,于是我從store中獲取登錄的用戶名,導(dǎo)致整個Layout加載崩潰
錯誤示范:
Navbar.vue
import store from '@/store'
...//省略其他組件引用
export default {
data(){
return {userName:''}
},
methods:{
getUserName(){
this.userName = store.getters.name
}
}
}ps:不管將import store...這行放在組件導(dǎo)入前還是導(dǎo)入后,都會影響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;
}
}
}以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
- vue3.0+element Plus實現(xiàn)頁面布局側(cè)邊欄菜單路由跳轉(zhuǎn)功能
- Vue3實現(xiàn)簡約型側(cè)邊欄的示例代碼
- vue使用動態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式
- Vue3點擊側(cè)邊導(dǎo)航欄完成切換頁面內(nèi)組件全過程(WEB)
- vue框架實現(xiàn)將側(cè)邊欄完全隱藏
- vue實現(xiàn)側(cè)邊定位欄
- VuePress 側(cè)邊欄的具體使用
- 如何利用Vue3管理系統(tǒng)實現(xiàn)動態(tài)路由和動態(tài)側(cè)邊菜單欄
- vue elementui簡易側(cè)拉欄的使用小結(jié)
相關(guān)文章
Vue.js實現(xiàn)一個自定義分頁組件vue-paginaiton
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)一個自定義分頁組件vue-paginaiton的具體代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-09-09
Vue+axios 實現(xiàn)http攔截及路由攔截實例
這篇文章主要介紹了Vue+axios 實現(xiàn)http攔截及路由攔截 ,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
使用vue init webpack項目名創(chuàng)建項目方式
這篇文章主要介紹了使用vue init webpack項目名創(chuàng)建項目方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
vue 界面刷新數(shù)據(jù)被清除 localStorage的使用詳解
今天小編就為大家分享一篇vue 界面刷新數(shù)據(jù)被清除 localStorage的使用詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09

