Vue-element-admin平臺側(cè)邊欄收縮控制問題
Vue-element-admin平臺側(cè)邊欄收縮控制
//找到store/modules/app.js文件
const app = {
state: {
sidebar: {
// opened: !+Cookies.get('sidebarStatus'), //原值
opened:true, //默認(rèn)展開(false是隱藏)
withoutAnimation: false
},
device: 'desktop',
language: Cookies.get('language') || 'en',
size: Cookies.get('size') || 'medium'
},
mutations: {
TOGGLE_SIDEBAR: state => { //點(diǎn)擊收縮功能觸發(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)航欄空白報(bào)錯(cuò)
問題描述
根據(jù)自己的需求修改導(dǎo)航欄與側(cè)邊欄樣式,修改過程中突然導(dǎo)航欄與側(cè)邊欄消失,控制臺報(bào)紅,說導(dǎo)航欄與側(cè)邊欄的注冊出現(xiàn)問題。
但是,原本的注冊組件代碼我根本沒改呀,百度一圈的答案也都是復(fù)制黏貼且無法解決我當(dāng)前的問題

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

