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使用動(dòng)態(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)動(dòng)態(tài)路由和動(dòng)態(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-10Vue.js實(shí)現(xiàn)一個(gè)自定義分頁組件vue-paginaiton
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)一個(gè)自定義分頁組件vue-paginaiton的具體代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09Vue3.0插件執(zhí)行原理與實(shí)戰(zhàn)
這篇文章主要介紹了Vue3.0插件執(zhí)行原理與實(shí)戰(zhàn),Vue項(xiàng)目能夠使用很多插件來豐富自己的功能Vue-Router、Vuex等,節(jié)省了我們大量的人力和物力,下面我們就一起來了解Vue3.0插件的原理吧,需要的小伙伴可以參考一下2022-02-02Vue+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-11vue 界面刷新數(shù)據(jù)被清除 localStorage的使用詳解
今天小編就為大家分享一篇vue 界面刷新數(shù)據(jù)被清除 localStorage的使用詳解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09